3

我试图让 slideToggle 根据 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，则单击它们时它们都会发生变化。这是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>
4

1 回答 1

2

您正在使用 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');
于 2012-09-05T01:48:22.527 回答