如何在 Javascript / jQuery 中將函數應用於多個具有相同名稱的元素

Question

我正在使用tagify.js插件，您可以在其中將標簽添加到輸入中。 我有 2 個模態，每個都包含一個輸入，您可以在其中添加用戶名作為標簽。

<input class="form-control" name="tags"></input>

由於屬性name可以添加到多個輸入中，而不必作為id屬性唯一，因此我在兩個模式中都保留了name="tags" 。

問題是當我應用插件並向輸入添加標簽時，它僅應用於第一個模態的輸入而不是第二個。

正如您在屏幕截圖中看到的，在第一個模式中，我可以在輸入中選擇標簽，但在第二個模式中它是空的。

我創建的函數不會產生任何錯誤。 我嘗試了console.log我擁有的每個變量，但我無法弄清楚問題出在哪里。

任何建議請我做錯了什么？ 非常感謝。

這是我的運行示例。 我添加了評論以便更好地理解。

Answer 1

在您的代碼querySelector只選擇第一個，

如果你想全選，你必須使用querySelectorAll

var inputElm = document.querySelectorAll('input[name=tags]');

在這種情況下 inputElm 是一個包含所有輸入的數組，您必須修改代碼以使用不同的元素。 （$.each 或其他循環）。 並且您必須為每個輸入創建一個 tagify 實例。 我建議你使用一系列的 tagify。

類似的東西：

var tagify = [];
inputElm.each(function(){
    var tag = new Tagify($(this),...
      :
    tagify.push(tag);
}