javascript - 插件由类的每个实例触发

Question

我正在使用 jQuery 并构建了一个小插件。

jQuery(document).ready(function(){

jQuery('.section').Section();
});



jQuery.fn.Section = function(func, options){

if(typeof(func)==='undefined') func = 'new';
if(typeof(options)==='undefined') options = new Object();


//var settings = $.extend({}, options);

var DOM = jQuery(this);
var p = DOM.parent();
var collapsed = false;
var slide_area = DOM.find('.slide_area');
var toggle_btn = DOM.find('.toggle_btn');

return this.each( function() {

    switch(func){

        case 'new':

            toggle_btn.on('click', function(){console.log('click');

                if (collapsed){

                    slide_area.slideDown();
                    toggle_btn.text('-');
                    collapsed = false;
                }else{

                    slide_area.slideUp();
                    toggle_btn.text('+');
                    collapsed = true;
                }
            });
        break;
    }



});
}

您可以看到，我正在使用类选择器将部分插件附加到具有“部分”类的所有 DIV。

在部分插件中，该部分中有一个切换按钮的监听器。

问题是，当我单击切换按钮时，该事件被触发 4 次。(有 4 个带有“section”类的 DIV。

我认为我已经正确设置了这个插件，因此它可以很好地与 jQuery 配合使用。我环顾四周，但找不到我做错了什么。

如何更改此设置，以便它不会为“部分”DIV 的每个实例触发一次单击功能？

下面是帮助理解结构的 HTML:

<div class="section"><!-- paypal settings -->
    <h3>Paypal Settings</h3>

    <div class="section_controls">
        <div class="toggle_btn">-</div>
        <div class="hr" style="background-color: <?php echo $settings->secondary_color; ?>;"></div>
    </div>
</div>

Answer 1

您正在 this.each(...) 之外进行工作，而本应在其中内部。例如，您的台词:

var slide_area = DOM.find('.slide_area');
var toggle_btn = DOM.find('.toggle_btn');

这些位于插件的 this.each(...) 部分之外，并且您已将 DOM 设置为(有效)插件的元素集被叫去。这意味着 slide_area 引用您调用的所有部分中的所有 .slide_area 元素，并且toggle_btn 指的是调用您的所有部分中的所有 .toggle_btn 元素。稍后在 this.each(...) 中，您使用 toggle_btn.on(...) 连接一个处理程序，因此您将它连接到所有四个单独切换按钮四次。

乍一看，您在 this.each(...) 之外所做的所有事情都应该在它的内部。