タグの制限のための選択性のプラグインボックスの数を維持するjQuery/JS

Question

私は現在、以下を行うための最良の（最も簡単な）方法を探しています。

ページに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'）;は、現在選択されているボックスのデータ属性の値です。私はページ上の1箱を持っている場合だけで正常に動作し

$('#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: ['|'] 
}); 

今。しかし、私がページ上に複数のボックスを持っていれば、カウントはコースから外れます。上記のGIFアニメーションアップで

、私は3個のタグを追加するときに最初のボックスで、それは3がすでに選択し、MAXでされている第四のタグに私に語ったことがわかります。それから私は2番目のボックスに1つのタグを挿入しようとするが、私にはすでに選択されたというメッセージが表示されているのが分かる3. 1つのフォームボックスを削除したら1もう1つをボックス2に追加することができる。他のタグは何も付いていません（tagLimitに既に達しているため）。

それぞれの制限数を維持するための方法を見つけようとしていますが、それぞれのボックスは解決策を思い付かないようです。

ご存知の方は、SelectivityというタグにjQueryプラグインを使用しています。しかし、の制限を自分で作成しました。これは、そのようなものはまったく含まれていないからです。

Answer 1

私は@JasonPこの意味することを考えています：私はそれがにするために使用することを代わりにグローバル変数のtagLimitオプション（VARのtagLimitを=置く場所

$('#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: ['|'] 
}) 

上記のコードはあります0;）。

そして、すべてtagLimitはthis.options.tagLimitになります。

はその後うまく働いた:)右方向、ジェイソン・プッシュのため

感謝を。