如何在点击时交换图像 src？答案

【问题标题】：How to swap image src on click?如何在点击时交换图像 src？
【发布时间】：2011-06-16 23:52:03
【问题描述】：

如何来回交换两个图像，例如切换。

试过了，但只适用于第一次尝试，不会切换回图像

$("img.trigger2").click(function(){
        $(this).toggleClass("active").next().slideToggle("slow");
        this.src = this.src.replace("collapse.gif","expand.png");
        this.src = this.src.replace("expand.png","collapse.gif");

 });

【问题讨论】：

在此回答 stackoverflow.com/q/554273/374804

标签： java jquery html

【解决方案1】：

最好预先加载两个图像，并在交换时使其可见和不可见

【讨论】：

【解决方案2】：

如果它像一个按钮，则使用 CSS background-image 并在点击时设置一个类似于“活动”的类。只需切换类名。

【讨论】：

【解决方案3】：

您有 2 个单独的图像并切换可见性，这样您就不必不断重新加载图像了？

为什么不设置 src 属性而不是使用 .src.replace？在 jQuery 中，就是这样：-

$("img.trigger2").click(function() {
   if (this.src == 'expand.png')
      this.src = 'collapse.gif';
   else
      this.src = 'expand.png';
});

【讨论】：

更快更好的是使用this.src而不是$(this).attr('src')
如果你有两个 img 标签，那么你可以只用 css 来做 :) 你可以
和 #div.normal:hover img.hover { /* 在此处切换可见性 */ } ...也许这个解决方案值得另一个答案。

【解决方案4】：

您可以通过多种方式做到这一点，我可以想到至少 6 种不同的方式，但我只给您其中一种作为示例：

- javascript 代码

$(document).ready(function() {
    // attaching onclick event listener to all images with class swappable
    $('img.swappable').click(function() {
        // get current event target
        var $this = $(this);

        // get current src value and store it in swap variable (local scope)
        var swap = $this.attr('src');
        // set src's new value to the value of rel=""
        $this.attr('src', $this.attr('rel'));
        // set rel's value to the old src value
        $this.attr('rel', swap);
    });
});

- html 代码

<img src="your/non_hover/image/address" rel="your/hover/image/address" class="swappable" />

注意：代码格式良好，便于阅读，但可以针对更少的调用进行优化并缩小。

【讨论】：