Javascript 这个范围问题

Question

我做了两个下拉菜单，但每个选择都会影响另一个

var dd = new DropDown( $('.f-box') );

我已将它们限定为 this 但它并未标识唯一元素，而是影响所有匹配选项。

   DropDown.prototype = {
    initEvents : function() {
        var obj = this;

        obj.dd.on('click', function(event){
            $(this).toggleClass('active');
            return false;
        });

        obj.opts.on('click',function(){
            var opt = $(this);

            obj.val = opt.text();
            obj.index = opt.index();
            obj.placeholder.text(obj.val);

        });
    }
}

看起来 obj.opts.on('click',function(){} 正在匹配所有 .f-box 元素，而不是当前匹配的元素被点击。我将它分配给 $(this) 的方式不正确吗？

http://jsfiddle.net/42dbqugj/

Answer 1

问题是因为您向 Dropdown() 函数提供了所有 .f-box 元素，因此它对所有这些元素都进行了操作。

解决这个问题的快速方法是遍历 .f-box 并分别调用它们的函数:

$('.f-box').each(function() {
  new DropDown($(this));
});

Updated fiddle

但是，更好的方法是完全将此逻辑更改为 jQuery 插件。然后标准模式是单独处理每个元素。