jQuery slidetoggle() divs using multiple id

Я использую этот скрипт jQuery для открытия и закрытия нескольких div на странице.jQuery slidetoggle() divs using multiple id

<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>

Все работает отлично, за исключением, я пытаюсь выбрать несколько идентификаторов, так что я могу изменить «expandersign» на все дивы при нажатии кнопки «развернуть все». Я также попытался использовать имя класса, поэтому мне нужен только один селектор, но он не работает.

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

Как выбрать несколько идентификаторов div?

Это HTML для моих развернуть все ссылки -

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

Что касается див быть переключено, каждый из них является -

<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("+") 
    } 
}); 
});

источник

2015-09-13 Rich

Вы также можете оставлять HTML и css? может быть, вы можете создать скрипку! – Rahul

@RahulNaik ok Я обновил код. – Rich

Ваша идея хороша, но вы должны быть ориентированы на каждый элемент по отдельности в цикле:

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

источник

2015-09-13 05:28:29 davidkonrad

Предоставление им всего класса или использование селектора startswith, скорее всего, является улучшением – mplungjan

@mplungjan, конечно же да! - но тогда я бы просто упомянул http://stackoverflow.com/q/3190761/1407478 или аналогичный, почти такой же вопрос с некоторыми предложениями об использовании общего класса. Я думаю, что OP будет в порядке, просто используя цикл, как указано выше, и тогда ему не нужно менять свою разметку. – davidkonrad

Еще хорошая идея;) – mplungjan

Ваш полный код может быть одним щелчком мыши, если вы используете классы и находите. Весь ваш код также может использовать класс и каждый цикл.

источник

2015-09-13 05:48:25 mplungjan

jQuery slidetoggle() divs using multiple id

ответ

Смежные вопросы