1

我有这 4 个下拉菜单，我将使用它在我的网站上设置高级搜索。我不是 javascript 程序员，所以我需要帮助来简化代码。我为我的 4 个字段拆分了 4 次代码，但我有一个错误，一个变量覆盖了之前设置的其他 3 个。肯定有一种简单的方法可以用一半的代码来做我需要的事情。这是我的环境http://jsfiddle.net/4K7L7/3/

    function DropDown(el) {
        this.dd = el;
        this.placeholder = this.dd.children('span');
        this.opts = this.dd.find('ul.dropdown > li');
        this.val = '';
        this.index = -1;
        this.initEvents();
    }
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('Tipo: ' + obj.val);
        });
    },
    getValue : function() {
        return this.val;
    },
    getIndex : function() {
        return this.index;
    }
}

$(function() {

    var dd = new DropDown( $('#dd') );

    $(document).click(function() {
        // all dropdowns
        $('.wrapper-dropdown-1').removeClass('active');
    });

});
4

1 回答 1

0

你的代码似乎没问题。您只需要为每个元素创建一个实例，如下所示：

var dd = new DropDown($('#dd')),
    cc = new DropDown($('#cc')),
    bb = new DropDown($('#bb')),
    aa = new DropDown($('#aa'));

或者为所有元素添加一个“dd”类，然后你可以拥有：

$('.dd').each(function(){
  new DropDown($(this));
});

无需复制功能...

于 2013-06-19T07:49:42.840 回答