Question

应该像独立工作一样工作。

此

(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);

Answer 1

示例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;
    });
});

Answer 2

(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);

Answer 3

看起来，你有两个重复的标记，它们应该具有相同的行为。在这种情况下，我将提取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);

如何将这两个jquery代码合二为一

3 个答案: