隔離自定義下拉列表

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();