javascript - 如何使用 .on click 事件以 4 个按钮作为触发器更改图像

Question

我需要你们的帮助。所以，这是我的条件。我有 4 个按钮来触发图像，单击按钮时它们将处于事件状态(我很擅长这个 - 但如果有更好的方法请告诉我)，

情景:
当我点击按钮 2 时，我希望出现“image2”(具有 class="active")。
然后，如果我单击按钮 3，“image2”淡出(删除事件类)并将事件类添加到“image3”

假设这是我的4 个按钮:

<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>

我还有一个像这样包装的图片部分:

<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>

我在想有什么方法可以使用数据元素在 jQuery 中获取图像？

我当前的 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 that have the selected ID, active.
    // other images must remove active classes
    var a = $(this).data('target');
    $('#image-container').find('img').eq(a).addClass('active');

            // and help me from here guys!

我知道这可能很容易，但我不是 jQuery 专家。
每个解决方案都会受到赞赏，并为真正的解决方案+1

Answer 1

将与相应图像类相关的数据属性添加到您的 html 中...和添加类...

试试这个

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

我不知道为什么 data-target 在那里，但如果你没有在你的代码中使用它..那么我想你可以使用它而不是创建新的数据属性..

$('.'+$(this).data('target')).addClass('active');