如何改变图像使用.on点击事件与4按钮作为触发器

How to change image using .on click event with 4 button as trigger

本文关键字：事件 按钮 触发器 on 何改变 改变 图像      更新时间：2023-09-26

我需要你们的帮助。这是我的情况。我有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>

和images ()的另一个部分，像这样包装:

<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

添加数据属性到你的HTML，这涉及到各自的imagecclass…最好选择用addclass…

替代和

试试这个

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

这里小提琴我不知道为什么data-target在那里，但如果你不在你的代码中使用它，那么我猜你可以使用它来代替创建新的数据属性。

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

在你的简单情况下，我认为只是使用标签位置索引是足够的。通常，如果触发按钮和目标图像是相同的数字，那么这应该工作，因为它们将共享相同的位置索引。

看看这个:

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();
});
相关文章：