Question

我正在使用这个jQuery脚本来打开和关闭页面上的多个div。

<script type="text/javascript">
jQuery(document).ready(function(){
    $("#expanderHead").click(function(){
        $("#expanderContent").slideToggle();
        if ($("#expanderSign").text() == "+"){
            $("#expanderSign").html("−")
        }
        else {
            $("#expanderSign").text("+")
        }
    });
    $("#expanderHead2").click(function(){
        $("#expanderContent2").slideToggle();
        if ($("#expanderSign2").text() == "+"){
            $("#expanderSign2").html("−")
        }
        else {
            $("#expanderSign2").text("+")
        }
    });
    $("#expanderHead3").click(function(){
        $("#expanderContent3").slideToggle();
        if ($("#expanderSign3").text() == "+"){
            $("#expanderSign3").html("−")
        }
        else {
            $("#expanderSign3").text("+")
        }
    });
    $("#expanderHead4").click(function(){
        $("#expanderContent4").slideToggle();
        if ($("#expanderSign4").text() == "+"){
            $("#expanderSign4").html("−")
        }
        else {
            $("#expanderSign4").text("+")
        }
    });
    $("#expanderHead5").click(function(){
        $("#expanderContent5").slideToggle();
        if ($("#expanderSign5").text() == "+"){
            $("#expanderSign5").html("−")
        }
        else {
            $("#expanderSign5").text("+")
        }
    });
    $("#expanderHead6").click(function(){
        $("#expanderContent6").slideToggle();
        if ($("#expanderSign6").text() == "+"){
            $("#expanderSign6").html("−")
        }
        else {
            $("#expanderSign6").text("+")
        }
    });
    $("#expanderHead7").click(function(){
        $("#expanderContent7").slideToggle();
        if ($("#expanderSign7").text() == "+"){
            $("#expanderSign7").html("−")
        }
        else {
            $("#expanderSign7").text("+")
        }
    });
    $("#expanderHead8").click(function(){
        $("#expanderContent8").slideToggle();
        if ($("#expanderSign8").text() == "+"){
            $("#expanderSign8").html("−")
        }
        else {
            $("#expanderSign8").text("+")
        }
    });
    $("#openalltext").click(function(){
        $(".openall").slideToggle();
if ($("#expanderSign8, #expanderSign7").text() == "+"){
            $("#expanderSign8, #expanderSign7").html("−")
        }
        else {
            $("#expanderSign8, #expanderSign7").text("+")
        }
    });
});
</script>

一切正常，但是，我试图选择多个id，所以我可以在点击“全部展开”时更改所有div上的“expanddersign”。我也尝试使用类名，所以我只需要一个选择器，但它不起作用。

$("#openalltext").click(function(){
            $(".openall").slideToggle();
    if ($("#expanderSign8, #expanderSign7").text() == "+"){
                $("#expanderSign8, #expanderSign7").html("−")
            }
            else {
                $("#expanderSign8, #expanderSign7").text("+")
            }
        });

如何选择多个div id？

这是我的扩展所有链接的HTML -

<h4 id="openalltext" class="dctopall" style="cursor:pointer;margin-bottom: 0 !important;">Expand All</h4>

对于被切换的div，每个都如下 -

<h4 id="expanderHead" class="dctop" style="cursor:pointer;margin-bottom: 0 !important;">Title Text <span id="expanderSign" class="exSign">+</span>
</h4>
<div id="expanderContent" class="openall" style="display:none">content</div>

这对我有用 -

$("#openalltext").click(function(){
            $(".openall").slideToggle();
    $("#expanderSign8, #expanderSign7, #expanderSign6, #expanderSign5, #expanderSign4, #expanderSign3, #expanderSign2, #expanderSign").each(function() {
  if ($(this).text() == "+") {  
     $(this).text("−")
  } else {
     $(this).text("+")
  }
});
});

Answer 1

您的想法很好，但您需要在循环中单独定位每个元素：

$("#expanderSign8, #expanderSign7, ...etc").each(function() {
  if ($(this).text() == "+") {  
     $(this).text("−")
  } else {
     $(this).text("+")
  }
});

Answer 2

如果您使用类并查找，则可以单击一下您的完整代码。您的所有代码也可以使用类和每个循环。

$(function(){
  $(".expanderHead").on("click",function(){
    $(this).find(".expanderContent").slideToggle(); 
    var $sign = $(this).find(".expanderSign");
    $sign.text() = $sign.text() == "+"?"−":"+";
  });
  $("#openalltext").on("click",function(){
    $(".openall").slideToggle();
    $(".expanderSign").each(function() {
      $(this).text() = $(this).text() == "+"?"-":"+";
    });
  });
});

jQuery slidetoggle（）divs使用多个id

2 个答案: