Javascript 膨胀和崩溃

我有一个会话的崩溃和扩展与JavaScript。它工作得很好

HTML

Javascript

<script type="text/javascript">
$(document).ready(function(){
    $("#expanderHead").click(function(){
        $("#expanderContent").slideToggle();
        if ($("#expanderSign").text() == "+"){
            $("#expanderSign").html("−")
        }
        else {
            $("#expanderSign").text("+")
        }
    });
});
</script>

<script type="text/javascript">
$(document).ready(function(){
    $(".expanderHead").click(function(){
        $(".expanderContent").slideToggle();
        if ($("#expanderSign").text() == "+"){
            $("#expanderSign").html("−")
        }
        else {
            $("#expanderSign").text("+")
        }
    });
});
</script>

然后我添加了一个或多个崩溃和扩展会话，它们不起作用。我把ID改成类，我点击一个，因为它是同一个类名，所以花费了所有。如果我保持相同的ID，只有第一个有效。有办法让它工作吗

HTML

Javascript

<script type="text/javascript">
$(document).ready(function(){
    $("#expanderHead").click(function(){
        $("#expanderContent").slideToggle();
        if ($("#expanderSign").text() == "+"){
            $("#expanderSign").html("−")
        }
        else {
            $("#expanderSign").text("+")
        }
    });
});
</script>

<script type="text/javascript">
$(document).ready(function(){
    $(".expanderHead").click(function(){
        $(".expanderContent").slideToggle();
        if ($("#expanderSign").text() == "+"){
            $("#expanderSign").html("−")
        }
        else {
            $("#expanderSign").text("+")
        }
    });
});
</script>

因为id是唯一的，所以需要将id=expanderSign更改为class=expanderSign

然后你可以做：

$(document).ready(function(){
    $(".expanderHead").click(function(){
        $(this).next().slideToggle();
        if ( $(this).find('.expanderSign').text() == "+"){
            $(this).find('.expanderSign').text("−");
        }
        else {
            $(this).find('.expanderSign').text("+");
        }
    });
});

或者，您可以这样缩短代码：

$(document).ready(function(){
    $(".expanderHead").click(function(){
        $(this).next().slideToggle();
        $(this).find('.expanderSign').text(function(_, v) {
            return v == "+" ? "-" : "+";
        })
    });
});

---

请注意，您的两个span具有相同的id expanderSign，但实际情况并非如此！因此，我使用SPAN作为选择器。

非常感谢您，Felix！我没有想到“$this.find.expanderSign.text=+{$this.find.expanderSign.text”−;' 现在可以了。

<script type="text/javascript">
$(document).ready(function(){
    $(".expanderHead").click(function(){
        $(this).next(".expanderContent").slideToggle();
        if ($(this).children("span").text() == "+"){
            $(this).children("span").html("−")
        }
        else {
            $(this).children("span").text("+")
        }
    });
});
</script>