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'); });  

fiddle here

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

Popular posts from this blog

linux - Does gcc have any options to add version info in ELF binary file? -

android - send complex objects as post php java -

charts - What graph/dashboard product is facebook using in Dashboard: PUE & WUE -