Question

如何来回切换两张图像，就像切换一样。

试过这个，但只能在第一次尝试时使用，不会切换图像

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

 });

Answer 1

你有两个单独的图像和切换可见性，所以你不必继续重新加载图像？

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

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

Answer 2

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

Answer 3

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

Answer 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" />

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

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

4 个答案: