Переключение многих идентификаторов div

У меня есть много div, которые нужно скрыть/показать, когда пользователь нажимает кнопку переключения. Моя кнопка переключения работает, но есть ли более короткий способ написать коды? Так и должно быть, при нажатии lblBtn1 будет скользить только dtxt1, а при нажатии lblBtn2 будет отображаться dtxt2.

    $(document).ready(function(){
      $("#lblBtn1").click(function(){
      $("#dtxt1").slideToggle();
      });
      $("#lblBtn2").click(function(){
      $("#dtxt2").slideToggle();
      });
   });

html

<lbl id="lblBtn1">&#43;</lbl>Menu1 
    <div id="dtxt1">ASDFGH</div>

<lbl id="lblBtn2">&#43;</lbl>Menu2 
    <div id="dtxt2">QWERTY</div>

html jquery
person Jennifer    schedule 23.12.2014    source источник
comment
добавление одного и того же именованного класса может выбрать только щелкнутый div $(.className)   -  person huseyin tugrul buyukisik    schedule 23.12.2014

Ответы (4)


arrow_upward
1
arrow_downward

попробуй это:

// Shorter $(document).ready
$(function () {
    // Use attribute selector for both of your #id because they are like each other..
    $("[id^=lblBtn]").click(function () { // or $("#lblBtn1, #lblBtn2").click(function () { 
        // Use next function to find next div to slideToggle because they are next to each other (siblings)
        $(this).next('div').slideToggle();
    });
});
person Mohamad Shiralizadeh    schedule 23.12.2014

arrow_upward
0
arrow_downward

Вы можете использовать id start с селектором или селектором тэга, чтобы настроить таргетинг на все элементы метки вдоль $(this).next() для таргетинга на нужные элементы div:

$("[id^=lblBtn]").click(function(){//or $("lbl").click(function(){
   $(this).next().slideToggle();
});

рабочая демонстрация

person Milind Anantwar    schedule 23.12.2014

arrow_upward
0
arrow_downward 

$('[id^="lblBtn"]').click(function(){
    $(this).next().slideToggle();
});

Это будет работать для всех ярлыков

Или попробуйте событие click для <lbl> тегов

person Vaibs_Cool    schedule 23.12.2014

arrow_upward
0
arrow_downward

Это нацелит на нужный #dtxt, даже если он не находится непосредственно рядом с #lblBtn.

$('[id^=lblBtn]').click(function() {
    var num = $(this).attr('id').replace('lblBtn', '');
    $('[id=dtxt' + num + ']').slideToggle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<lbl id="lblBtn1">&#43;</lbl>Menu1 
    <div id="dtxt1">ASDFGH</div>

<lbl id="lblBtn2">&#43;</lbl>Menu2 
    <div id="dtxt2">QWERTY</div>

person kapantzak    schedule 23.12.2014