jQuery插件在第二次调用时无法正常工作。

Question

我知道这是我编写的插件处理多个实例的方式存在问题。我相信至少有一个变量被每个后续调用插件覆盖了。无论如何，这是插件代码:

$.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) )，这样更改第一个选择框将启用第二个选择框但不启用第三个，更改第二个选择框将启用第三个选择框。

但是，由于$dependent被重写并设置为第三个元素，因此当前代码会使更改第一个选择框启用第三个选择框，但不启用第二个选择框（我认为是因为调用了两次dependsOn）。

如果不清楚，请告诉我。

- Jake

---

一个完美的问题模型。清晰地描述您想要什么以及出现了什么问题，同时提供使用的代码！太棒了。如果有一个 jsfiddle 就好了…… - mowwwalker

我考虑使用JSFiddle。我将开始创建一个。 - Jake

没事了，Gonzalo搞定了。请看这里：http://jsfiddle.net/d8jUd/ - mowwwalker

是的，他做到了！一旦SO允许我，我打算接受。 - Jake

Answer 1

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

这就是被替换的原因。

祝好运 :)

- Gonzalo Larralde

---

太棒了，那就是问题所在。谢谢！ - Jake

Answer 2

你声明 $dependant 的方式使它成为了一个全局变量，所以下一次调用该函数时，它会将同一个全局的 $dependant 设置为新值。尝试使用以下代码：

var $dependant = $(this);

- Daniel Mendel