隔离自定义下拉列表

Question

我建立了自定义下拉菜单，取代旧学校<select>下拉菜单。如你所知，这些丑陋的东西是由浏览器控制的，因为该网站主要是黑暗的，我不想要一个像<select>元素一样的白色下拉框。

我用下面的JS：

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'); 
    }); 

}); 

和HTML看起来像这样：

<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> 

如果我做了以下内容：

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

... 

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

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

我的JS显示var dd = new DropDown($('.custom-dropdown'));，修正了初始化问题，因为一个类可以共享，一个ID可以没有，但是......当我拿起一个选项，从下拉菜单中的一个，它填充所有的人（因为类的我知道）:(

所以，帮助我在这里，我怎么能初始化这个全球和隔离下拉菜单人口只是正在使用的？

见我的DEMO here PS我的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（“value”）这样的原型函数，那么只有在dd中的所有下拉列表都设置为“value”时才有意义。 dd应该只代表一个下拉菜单。如果你得到了我想说的话，那么dd是多个不同的下拉菜单没有多大意义。

要么你可以重写它的工作为：

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

，或者你可以让每个单独的下拉列表中的数组：

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

dds[2].getValue();