如何重用此功能？

Question

我編寫了一個功能正常的函數，但是當我嘗試在具有相同類的多個html塊上重用它時，它會中斷。 我試圖使用.next()和.closest()方法，但沒有結果。 我在哪里應用這些？ 該功能是通過使用無序列表來重新創建<select>下拉列表。

重要的是，類和函數必須與CMS生成的列表相同，並且可以是頁面的多次。因此，在解決方案中更改代碼並分別調用每個函數是不好的。

演示

下拉列表正常運行 （功能在一個無序列表上正常運行）

下拉菜單中斷 （當重用函數和html代碼時）

Answer 1

您的腳本有很多需要更改的地方。 據我所能理解的， 這應該是最好的。

要點是：

$(".cloned").click(function(){
    $('.options').toggle();
    e.preventDefault();                 
});

處理程序中的$('.options')選擇器將選擇options類中的所有元素，無論您在文檔中單擊的位置如何。 這就是每個下拉菜單都在點擊時激活的原因。

您應該只為點擊選擇特定的.options元素。 有很多方法可以做到這一點，但這就是我所做的：

$(this).next('.options').toggle();

Answer 2

這樣可以更好。

使用toggleClass()

小提琴