Question

我正在尝试使用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，那么当点击一个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');

jquery slidetoggle图像交换

1 个答案: