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 pro。
每个解决方案都会受到赞赏，并为真正的解决方案+1。

Answer 1

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

试试这个

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

Answer 2

在你的简单案例中，我认为只使用标记位置索引就足够了。通常情况下，如果触发按钮和目标图像的编号相同，则应该可以使用，因为它们将共享相同的位置索引。

检查出来：

var img = $('#images-container').find('img'),
    trigger = $('.trigger');

$('#button').on('click', '.trigger', function(e) {
    var self = $(this), // this trigger tag
        selfIndex = self.index(); // position of this trigger tag

    img.removeClass('active'); // remove class active from all img(s)
    img.eq(selfIndex).addClass('active'); // add class active just on this img

    trigger.removeClass('active'); //r emove class active from all trigger(s)
    self.addClass('active'); // add class active just on this trigger

    e.preventDefault();

});

但如果您想使用数据属性，请执行以下操作：为按钮的数据属性添加值，如下所示：

<div id="button">
  <div class="trigger button-1" data-target="image1"></div>
  <div class="trigger button-2" data-target="image2"></div>
  <div class="trigger button-3" data-target="image3"></div>
  <div class="trigger button-4" data-target="image4"></div>
</div>

然后在JS / jQuery中，执行以下操作：

var img = $('#images-container').find('img'),
    trigger = $('.trigger');

$('#button').on('click', '.trigger', function(e) {
    var self = $(this);

    img.removeClass('active'); // remove class active from all img(s)
    img.filter('.' + self.data('target')).addClass('active'); // add class active just on this img

    trigger.removeClass('active'); //r emove class active from all trigger(s)
    self.addClass('active'); // add class active just on this trigger

    e.preventDefault();

});

如何使用.on点击事件以4按钮作为触发来更改图像

2 个答案: