jQuery slidetoggle() div 使用多个 id

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>

一切正常，除了我正在尝试 select 多个 ID，这样我可以在单击 "expand all" 时更改所有 div 上的 "expandersign"。我也试过使用 class 名称，所以我只需要一个 selector 但它没有用。

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

如何 select 多个 div ID？

这是 html 我展开全部 link --

<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

如果您使用 classes 并查找，您的完整代码可以单击一次。您的所有代码还可以使用 class 和 each 循环。

$(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() div 使用多个 id

jQuery slidetoggle() divs using multiple id

javascript

css

jquery

click

slidetoggle