Hi everyone, I could really use your assistance with this issue. Let me explain the situation. I have 4 buttons that are meant to trigger different images. When a button is clicked, it should become active (I think I have this part figured out, but let me know if there's a better approach).
SCENARIO:
If I click on button 2, "image2" should appear with the class "active".
Then, when I click on button 3, "image2" should fade out (lose its "active" class) and "image3" should gain the "active" class.
Here are the 4 buttons:
<div id="button">
<div class="trigger button-1" data-target="0"></div>
<div class="trigger button-2" data-target="1"></div>
<div class="trigger button-3" data-target="2"></div>
<div class="trigger button-4" data-target="3"></div>
</div>
And here is how the images section is structured:
<div id="images-container">
<img src="image-1" class="image1">
<img src="image-2" class="image2">
<img src="image-3" class="image3">
<img src="image-4" class="image4">
</div>
I was wondering if there's a way to retrieve the images in jQuery using the data element?
Here is my current jQuery code:
var img = $('#images-container img'),
trigger = $('.trigger');
// When a trigger is clicked, make it active and deactivate others
trigger.on('click', function(){
$(this).addClass('active');
$(this).siblings().removeClass('active');
// Make the image with the selected ID active
var a = $(this).data('target');
$('#image-container').find('img').eq(a).addClass('active');
// This is where I need assistance!
I realize this may be simple for some, but I'm not a jQuery expert. Any solutions would be greatly appreciated, and +1 for the best solution!