jQuery 更改单击图像的图像 onclick 和其他图像

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事件 anchor 的类:

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