Question

我构建了一个自定义下拉列表，用于替换旧学校dist下拉列表。如你所知，这些丑陋的东西都是由浏览器控制的，因为网站主要是黑暗的，我不想要像<select>元素那样的白色下拉框。

我使用了以下JS：

<select>

HTML看起来像这样：

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 (e) {
        var obj = this;

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

        obj.opts.on('click', function () {
            var opt = $(this);
            obj.val = opt.text();
            obj.index = opt.index();
            obj.placeholder.text(obj.val);
        });
    },
    getValue: function () {
        return this.val;
    },
    getIndex: function () {
        return this.index;
    }
}

$(function () {

    var dd = new DropDown($('.custom-dropdown'));
    //var dd = new DropDown($('#dd2'));

    $(document).click(function () {
        // all dropdowns
        $('.wrapper-dropdown-3').removeClass('active');
        // dropdown closes by clicking outside
        $(".custom-dropdown ul").parent().removeClass('active');
    });

});

如果我执行以下操作：

<div class="form-group">
    <label class="control-label">Select Your Area</label>
    <div id="dd" class="custom-dropdown form-control">
        <span>Select One</span>
        <ul class="dropdown">
            <li><a href="#">White/Caucasian</a></li>
            <li><a href="#">Black/African-American</a></li>
            <li><a href="#">Hispanic</a></li>
            <li><a href="#">Asian</a></li>
            <li><a href="#">Pacific Islander</a></li>
            <li><a href="#">Middle-Eastern</a></li>
        </ul>
    </div>
</div>

问题解决了。事实上，这正是我一直在做的事情。但这很麻烦。该应用程序将有大约1000个数据输入页面。因此，这不太理想。

我的JS显示var dd = new DropDown($('#dd')); var dd = new DropDown($('#dd2')); ... var dd = new DropDown($('#ddnth'));哪个修复了初始化问题，因为一个类可以共享，ID不能，但是......当我从其中一个下拉列表中选择一个选项时，它会填充所有这些选项（因为我认识的课程:(

所以，请帮帮我。如何在全局范围内对其进行初始化并将下拉数据集中与正在使用的数据集隔离开来？

请参阅我的演示here p.s.我为SCSS道歉，点击编译的视图，如果这有助于你。甚至认为这不是一个CSS问题;）

谢谢你！

Answer 1

如何在每个相同的类上循环它。

E.g。

    $('.custom-dropdown').each(function (index, value)  {
        var dd = new DropDown($(value));
    });

<强> Codepen

Answer 2

您将启动器编写为var dd = new DropDown($('.custom-dropdown'));，但如果$('.custom-dropdown')是多个元素，那么dd引用的是什么？

如果我添加了像dd.setValue这样的原型函数（＆＃34; value＆＃34;），那么只有将dd中的所有下拉列表设置为＆＃34; value＆＃34;才有意义。 dd应该只代表一个下拉列表。如果你得到我想说的话，dd是多个不同的下拉列表并没有多大意义。

您可以将其重写为：

$('.custom-dropdown').createDropDown();
$('.custom-dropdown').eq(0).getDropDownValue();

或者您可以将每个下拉列表放在一个数组中：

var dds=[];
$('.custom-dropdown').each(function(){
    dds.push(new DropDown($(this)));
});

dds[2].getValue();

隔离自定义下拉菜单

2 个答案: