Question

我有一个关于jQuery的问题。我有三个图像，实质上是相同的。区别在于其中一个图像（我们称之为“活动”图像）是不同的颜色，而其他两个图像是相同的。

这是一个视觉片段：我有一个“促销”横幅，旁边有三个箭头，比如箭头。根据您单击的箭头图像，将显示不同的促销图像（三个促销图像全部在一起 - 与箭头相同）。

如果我可以将“活动”箭头显示为一种颜色，我会喜欢它，而“非活动”箭头则是另一种颜色。当我点击另一个箭头时，原来的“活动”一个因为“非活动”而我刚刚点击的那个变为“活动”。我确信它可以完成，我只是不知道该怎么做：/

以下是我正在使用的HTML：

<div class="rotation_container">
  <a class="rotator" id="rotator_1" href="#"><img class="cycle_icon" id="r1" src="images/promo/rotator_active.png" /></a>
  <a class="rotator" id="rotator_2" href="#"><img class="cycle_icon" id="r2" src="images/promo/rotator_inactive.png" /></a>
  <a class="rotator" id="rotator_3" href="#"><img class="cycle_icon" id="r3" src="images/promo/rotator_inactive.png" /></a>
</div>

Answer 1

这样的事情可能适用于您当前的标记：

$('a.rotator').click(function () {
  // Make all inactive
  $('div.rotation_container img').attr('src', 'images/promo/rotator_inactive.png');

  // Make the one that was clicked active
  $(this).find('img').attr('src', 'images/promo/rotator_active.png');
});

但实际上，你应该通过CSS实现这一目标。删除<img>元素并将.active类应用于活动锚点：

<div class="rotation_container">
  <a class="rotator active" id="rotator_1" href="#"></a>
  <a class="rotator" id="rotator_2" href="#"></a>
  <a class="rotator" id="rotator_3" href="#"></a>
</div>

您可以通过CSS应用活动/非活动图像：

a.rotator { background:url(images/promo/rotator_inactive.png) }
a.rotator.active { background:url(images/promo/rotator_active.png) }

.click处理程序变得更加简单：

$('a.rotator').click(function () {
  $('a.rotator.active').removeClass('active');
  $(this).addClass('active');
});

Answer 2

尝试类似这样的脚本：

$(document).ready(function(){
    $('.rotator').click(function(){
        $(this).find('img').attr('src', $(this).find('img').attr('src').replace('_inactive', '_active'));

        $('.rotator:not(#'+$(this).attr('id')+') img').each(function(){
            $(this).attr('src', $(this).attr('src').replace('_active', '_inactive'));
        });

        return false;
    });
})(jQuery);

1）如果点击“.rotator”，则：

2）在里面找到“img”并在src中用“_active”替换“_inactive”。

3）“.rotator”里面的每一个“img”变成“_inactive”而不是“_active”

4）“返回虚假;”使点击不滚动页面到顶部

jQuery更改图像onclick图像点击和其他

2 个答案: