jQuery/JS保持計數的選擇性插件框的標籤限制

我目前正在試圖找到最好的（最簡單）的方式來做到以下幾點。jQuery/JS保持計數的選擇性插件框的標籤限制

我在我的頁面上有2個輸入框，每個輸入框都有一個數據屬性data-cnt。這從0開始，然而對於頁面上的很多盒子。

<p><span id="bomtags" data-powertip="" style="width: 150px;" data-cnt="0"></span></p> 
<p><span id="bomtags1" data-powertip="" style="width: 100px;" data-cnt="1"></span></p>

與上面的例子一樣，我只有2個方框（0和1）。

目前，我與限制計數緊跟像這樣：

var tagLimit = 0; 
var theOptions; 
....more code within here.... 

_itemRemoveClicked: function (event) { 
    tagLimit--; 

    this.remove(this._getItemId(event)); 
    this._updateInputWidth(); 
    $.powerTip.hide(); 

    return false; 
}, 
....more code within here.... 

_open: function() { 
    toolTip(false); 
    $('#' + this.$el[0].id).data('powertip', '<p style="top: -10px; position: relative;">Max limit of ' + this.options.limit + ' tags reached!<br/>Delete a tag in order to add again.</p>'); 

    if (this.options.showDropdown !== false) { 
     if (tagLimit != this.options.limit) { 
      console.log(this.$el.attr('data-cnt')); 
      this.open(); 
     } else { 
      toolTip(true); 
     } 
    } 
}, 
....more code within here.... 

_resultSelected: function (event) { 
    if (tagLimit < this.options.limit) { 
     if (this._value.indexOf(event.id) === -1) { 
      this.add(event.item); 
      tagLimit++; 
     } else { 
      this.remove(event.item); 
      tagLimit--; 
     } 
    } 
},  
....more code within here.... 

if (tagLimit != this.options.limit) { 
    //console.log('opened'); 
    console.log(this.$el.attr('data-cnt')); 
    this.open(); 
} else { 
    //console.log('hit'); 
    toolTip(true); 
}

的this.options.limit房屋MAX數允許標籤在箱子裏。

this。$ el.attr（'data-cnt'）;是當前所選框的數據屬性的值。

$('#bomtags').select3({ 
    items: cities, //['red', 'green', 'blue'], 
    multiple: true, 
    allowClear: true, 
    placeholder: 'No permissions selected', 
    limit: 3, //<--- the custom jQuery option 
    tokenSeparators: ['|'] 
}) 

$('#bomtags1').select3({ 
    items: cities, 
    multiple: true, 
    allowClear: true, 
    bgColor: 'rgba(255, 255, 255, 0.5)', 
    placeholder: 'No color selected', 
    limit: 3, //<--- the custom jQuery option 
    tokenSeparators: ['|'] 
});

現在，如果我只在頁面上有1個框，那麼工作得很好。但是如果我在頁面上有多個框，那麼計數就會偏離正常。

在GIF動畫了上面，你看到的是，在第一個框，當我加3個標記它告訴我，4號標記，3已經被選中，是MAX。然後你看到我試圖在第二個盒子中插入1個標籤，但給我一個已經選擇的信息3.一旦我刪除了一個表格盒子1，我可以在盒子2上添加另一個。這可以繼續，並且在一個盒子可以有3個標籤，而另一個卡住（因爲已經到達tagLimit）。

我試圖找出一種方法，以保持的每個框的限制計數，但它似乎無法提供解決方案。

如果您需要知道，我使用的標籤名爲Selectivity的jQuery插件。但是，我自己創建了限制選項，因爲它沒有包含任何類似開箱即用的選項。

來源

2017-08-23 StealthRT

它看起來像'tagLimit'變量是全局的，或者至少在全局範圍內，而不是插件。試試'this.tagLimit'（或者'this.tagCount'好像是一個更好的名字）。 –

事實上，似乎tagLimit是全球範圍的。 –

@JasonP你能發表一個你在說什麼的例子嗎？ – StealthRT

我在想，@JasonP意味着這樣的：

$('#bomtags').select3({ 
    items: cities, //['red', 'green', 'blue'], 
    multiple: true, 
    allowClear: true, 
    placeholder: 'No permissions selected', 
    limit: 3, 
    tagLimit: 0, //<--- added custom jQuery option 
    tokenSeparators: ['|'] 
}) 

$('#bomtags1').select3({ 
    items: cities, //['red', 'green', 'blue'], 
    multiple: true, 
    allowClear: true, 
    bgColor: 'rgba(255, 255, 255, 0.5)', 
    placeholder: 'No color selected', 
    limit: 3, 
    tagLimit: 0, //<--- added custom jQuery option 
    tokenSeparators: ['|'] 
})

上面的代碼是我放在tagLimit選項，而不是一個全球變量，它曾經是（VAR tagLimit = 0;）。

而且所有tagLimit都變成this.options.tagLimit。

工作只是罰款之後:)

感謝在正確的方向，傑森推。

來源

2017-08-23 20:00:20 StealthRT

jQuery/JS保持計數的選擇性插件框的標籤限制

回答

相關問題