Вопросы Теги

как объединить эти 2 код jQuery в один

Должен работать то же, как это работает независимо.

Это

(function($) { 
     $(document).ready(function(){
          $('#number1').hide();
        $('.button1').click(function(){
              $('.table1').slideToggle();
        $(this).toggleClass("minus_icon"); 
                return false;
   });
});

})(jQuery);

и это

(function($) { 
     $(document).ready(function(){
          $('#number2').hide();
        $('.button2').click(function(){
              $('.table2').slideToggle();
        $(this).toggleClass("minus_icon"); 
                return false;
   });
});

})(jQuery);

оба будут использоваться на той же странице.

Спасибо

Править: Добавленный после @Felix комментарий

@Felix - Вы имеете в виду как это?

(function($) { 
     $(document).ready(function(){
          $('#number2, #number1').hide();
        $('.button2').click(function(){
              $('.table2').slideToggle();
        $(this).toggleClass("minus_icon"); 
                return false;
   });
});
        $('.button1').click(function(){
              $('.table1').slideToggle();
        $(this).toggleClass("minus_icon");
                return false;
   });
})(jQuery);
1
задан Jitendra Vyas 7 July 2010 в 07:34
поделиться

3 ответа

Образец HTML 

<button id="button1" class="btn" div="table1">Table 1</button>
<button id="button2" class="btn" div="table2">Table 2</button>
<div class="myDiv" id="div1"><table><tr><td>Table1</td></tr></table></div>
<div class="myDiv" id="div2"><table><tr><td>Table2</td></tr></table></div>

CSS 

  .myDiv { display:none; }

JQuery 

 $(document).ready(function(){

    $('.btn').click(function(){
        //identify same class to all your div for example in this case I will define all tables as myDiv
        // doing this will not fix the effect to just two tables
        $(".myDiv").slideUp(); //Hide all divs first

        $('#'+$(this).attr("div")).slideToggle(); //show the required
        $(this).toggleClass("minus_icon");
        return false;
    });
});
1
ответ дан 2 September 2019 в 23:14
поделиться 
(function($) { 
     $(document).ready(function(){
        $('#number1, #number2').hide();

        $('.button1, .button2').click(function(){
            if($(this).is('.button1')) {
                $('.table1').slideToggle();
            else
                $('.table2').slideToggle();
            $(this).toggleClass("minus_icon"); 
            return false;
        });

    });
})(jQuery);
1
ответ дан 2 September 2019 в 23:14
поделиться

Похоже, у вас есть две повторяющиеся разметки, которые должны вести себя одинаково. В этом случае я бы извлек JS-код, который определяет требуемое поведение, и вызвал бы его с необходимыми аргументами разметки: 

(function($) { 
    function CondfigureEvents(numberSelector, buttonSelector, tableSelector)
    {
        $(document).ready(function(){
        $(numberSelector).hide();
        $(buttonSelector).click(function(){
            $(tableSelector).slideToggle();
            $(this).toggleClass("minus_icon"); 
            return false;
        });
    }
    CondfigureEvents('#number1', '.button1', '.table1');
    CondfigureEvents('#number2', '.button2', '.table2');
});
})(jQuery);
0
ответ дан 2 September 2019 в 23:14
поделиться
Другие вопросы по тегам:

Похожие вопросы: