Question

I get the following case:

Elements: Image A, Image B, Button A, Button B

Default:

1. Show Image A and hide Image B.(add class name “hidden”)
2. Style added to activated Button A.(add class name “active”)

Function:
1. Show Image A and hide Image B when clicking Button A. And vice versa.
2. Style is added to the activated button. And vice versa.

Code:

<img class="image" src="ImageA.jpg" />
<img class="image hidden" src="ImageB.jpg" />
<div class="Button active">Button A</div>
<div class="Button">Button B</div>

I want to apply the function to more than one of the above case without making further change of JavaScript. Is there any method to present the JS in a generic way?

Answer 1

<img id="imageA" class="image" src="ImageA.jpg" />
<img id="imageB" class="image hidden" src="ImageB.jpg" />
<button attr-image="imageA" class="Button active">Button A</button>
<button attr-image="imageB" class="Button">Button B</button>

$(".button").click(function(){
    $('.image').addClass('hidden');
    $('#'+$(this).attr('attr-image')).removeClass('hidden');
    $('.button').removeClass('active');
    $(this).addClass('active');
})

What it does is with each button it stores the id of corresponding image..

when a button is clicked, it adds hidden to all images, and then removes it from the one corresponding to the button..

Same way for button first remove all buttons active class, and then add to the one clicked..