javascript - How to change image using .on click event with 4 button as trigger -
i need guys here. so,here condition. have 4 buttons trigger images, when button clicked have active (i'm 1 - let me know if there better way),
scenario:
when click on button 2, want "image2" appear (have class="active").
if click on button 3, "image2" fadeout (remove class active) , add class active "image3"
lets 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 have section images wrapped this:
<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 thinking there someway can images in jquery using data element?
my current jquery:
var img = $('#images-container img'), trigger = $('.trigger'); // click this, make active, other? no trigger.on('click', function(){ $(this).addclass('active'); $(this).siblings().removeclass('active'); // image have selected id, active. // other images must remove active classes var = $(this).data('target'); $('#image-container').find('img').eq(a).addclass('active'); // , me here guys!
i know maybe easy, i'm not jquery pro.
every solutions appreciated, , +1 real solution
add data atrribute html relates respective imageclass... , addclass...
try this
html
<div class="trigger button-1" data-target="0" data-imageclass="image1"></div> <div class="trigger button-2" data-target="1" data-imageclass="image2"></div>
jquery
var img = $('#images-container img'), trigger = $('.trigger'); // click this, make active, other? no trigger.on('click', function(){ $(this).addclass('active'); $(this).siblings().removeclass('active'); $('#images-container img').removeclass('active'); $('.'+$(this).data('imageclass')).addclass('active'); });
i don't know why data-target
there if not using in codes..then guess can use instead of creating new data attribute..
$('.'+$(this).data('target')).addclass('active');
Comments
Post a Comment