jquery SlideToggle 图像交换

Question

我正在尝试让 SlideToggle 根据 div 是否展开或折叠来交换图像。我让它以一种方式工作，它将图像从加号更改为减号，但它只适用于一个 div，而我有多个 div，它只能工作一次。它不会切换。

这是 jQuery:

$(".content").toggle(1);
$(".expand").click(function () {
    $(this).next(".content").slideToggle(400);

    if ($(".image1").attr('src', "../nathan/plus.png")) {
        $(".image1").attr(
            'src', 
            $(".image1").attr('src').replace('plus', 'minus')
        );
    } else {
        $(".image1").attr(
            'src', 
            $(".image1").attr('src').replace('minus', 'plus')
        );
    }
});
});

IndexOf() 可以工作，但如果我要复制 div，单击一个 div 时它们都会发生变化。这是 HTML:

<div class="list">
<h2 class="expand">Title1<img class="image1" src="../nathan/plus.png"></h2>
<div class="content">
</div>
</div>

<div class="list">
<h2 class="expand">Title2<img class="image1" src="../nathan/plus.png"></h2>
<div class="content">
</div>
</div>

Answer 1

您正在使用 setter 方法来检查您的“src”

if ($(".image1").attr('src', "../nathan/plus.png"))

改为使用

if ($(".image1").attr('src') == "../nathan/plus.png"))

或者更好的是使用 indexOf() 检查源是否包含图像

if ($(".image1").attr('src').indexOf("plus.png") > -1)

编辑:

您可能可以这样做以防止所有更改 - 这是查找图像的上下文

$(".expand").click(function() {
    $(this).next(".content").slideToggle(400);
    var $img = $(".image1", this);
    if ($img.attr('src').indexOf("plus.png") > -1) {
        $img.attr('src', $img.attr('src').replace('plus', 'minus'));
    } else {
        $img.attr('src', $img.attr('src').replace('minus', 'plus'));
    }
});​

所以

$(".image1", this);

与

相同

$(this).find('.image1');