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

I have a question regarding jQuery. I have three images that are, in essence, the same. The difference is that one of the images (let's call it the 'active' image) is a different color, while the other two images are the same.

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

Here's a visual piece: I have a "promo" banner that has three images of, say, arrows next to it. Depending on the arrow image that you click, a different promo image is displayed (there are three promo images all together -- the same as the arrows).

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

I'd love it if I could get the "active" arrow to be displayed in one color, while the "inactive" arrows are another color. When I click on another arrow, the original "active" one because "inactive" and the one I just clicked on becomes "active". I'm sure it can be done, I just have no idea how to do it :/

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

Here's the HTML that I'm working with:

这是我正在使用的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>

2 个解决方案

#1

Something like this might work with your current markup:

这样的东西可能适用于您当前的标记：

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

But really, you should be achieving this via CSS. Remove the <img> elements and apply a .active class to the active anchor:

但实际上，你应该通过CSS实现这一目标。删除 jQuery更改图像onclick图像点击和其他元素并将.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>

You can apply the active/inactive image through CSS:

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

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

And the .click handler becomes much simpler:

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

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

#2

Try something like this script:

尝试这样的脚本：

$(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) if ".rotator" is clicked, then:

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

2) find "img" inside and replace "_inactive" with "_active" in the src.

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

3) every other "img" inside ".rotator" becomes "_inactive" instead of "_active"

3）“.rotator”中的每个其他“img”变为“_inactive”而不是“_active”

4) "return false;" to make the click not scroll the page to the top

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

#1