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



});
}

你可以看到，我正在使用类选择器将Section插件附加到具有类'section'的所有DIV。

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

问题是，当我点击切换按钮时，事件会被触发4次。（有4个DIV带有'section'类。

我认为我已正确设置此插件，因此它可以很好地与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(...)之外所做的一切都应该在里面。

Answer 2

只需将变量放在return this.each中，就像这样：

return this.each( function() {
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');

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



});
}

插件由类的每个实例触发

2 个答案: