jQuery插件在调用两次时不起作用答案

【问题标题】：jQuery plugin doesn't work when called twicejQuery插件在调用两次时不起作用
【发布时间】：2012-01-26 03:30:23
【问题描述】：

我知道这是我编写用于处理多个实例的插件的方式的问题。我很确定至少有一个变量被插件的每个后续调用覆盖。无论如何，这是插件代码：

$.fn.extend({
dependsOn: function( $claimer ){
    $dependent = $(this);
    $claimer.change(function(){
        alert( $dependent.attr('id') );
        var $selected = $('option:selected', this);
        var pk = $selected.attr('class');

        $dependent.removeAttr('disabled');
        $dependent.find('option').each(function(){
            $hiddenOpts = $dependent.parent().find('.hiddenOptions');
            $hiddenOpts.append( $(this) );
            $hiddenOpts.find('option').each(function(){
                if( $(this).attr('ref') == pk || $(this).hasClass('empty') )
                    $dependent.append( $(this) );
            });
        });
    });
}
});

当我调用$('.something').dependsOn( $('.somethingElse') ); 时，它工作正常，但如果我在另外两个项目上再次调用它，$dependent 变量将设置为那个元素。

插件的重点是保持选择框处于禁用状态，直到前一个选择框被更改。如果我连续有三个选择框，并且我希望启用第一个，第二个依赖于第一个，第三个依赖于第二个，我会调用 $(second).dependsOn( $(first) ) 和 $(third).dependsOn( $(second) )，所以更改first 将启用第二个但不启用第三个，更改第二个将启用第三个。

但是对于当前的代码，更改第一个会启用第三个，而不是第二个（就像我说的，我认为这是因为 $dependent 被覆盖并在两次调用 dependsOn 后设置为第三个）。

如果不清楚，请告诉我。

【问题讨论】：

100% 完美的问题模型。清楚地描述你想要什么，出了什么问题，以及使用的代码！杰出的。如果只有一个 jsfiddle....
我认为是 jsfiddle。我会开始组装一个。
没关系，Gonzalo 做到了。见这里：jsfiddle.net/d8jUd
是的，他做到了！计划在 SO 允许后接受。

标签： javascript jquery jquery-plugins

【解决方案1】：

这是因为您没有在dependsOf 范围内定义新变量（使用var $dependent = blah 完成）。相反，您将 $(this) 的值设置为 $dependent 的全局版本。

这就是它被替换的原因。

祝你好运:)

【讨论】：

太棒了，这就是问题所在。谢谢！

【解决方案2】：

您声明$dependant 的方式是使其成为全局变量，因此下次调用该函数时，它会将相同的全局$dependant 设置为新值。试试：

var $dependant = $(this);

【讨论】：