时间戳

首页 > 解决方案 > Javascript这个范围问题

javascript - Javascript这个范围问题

问题描述

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

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/

标签： javascriptjquery

解决方案

问题是因为您为函数提供了所有.f-box元素Dropdown()，因此它对所有元素都起作用。

解决这个问题的快速方法是循环.f-box并单独调用它们的函数：

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

更新的小提琴

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

推荐阅读