0

それ以外の場合は静的なアイテムのリストで特定のキーワード ボタンを使用して、単純な絞り込みフィルターを作成しようとしています。

ボタンは順序付けされていないリストにあり、選択するとクラス「.selected-tag-button」が追加されます。

アイテムは、クラス「.item」の div であり、アクティブなときにクラス「.included-item」を取得します。div 内には、ボタンのテキスト ノードに一致するキーワードを含むリスト アイテムを含む別の UL があります。

現在、クリックされたボタンのキーワードのみを含む「buttonName」を使用する代わりに、選択したすべてのキーワードの配列を含む「buttonArray」を使用したいと考えています。

何らかの機能が必要になると思いますが、どこから始めればよいかわかりません。複数のキーワードが選択されている場合、選択したすべてのキーワードを含む項目のみに結果を限定したいと考えています。私が理解できたすべてのソリューションは、配列内のキーワードのいずれかを含む div を返します。

$(document).ready(function() {

  $("li.tag-button").on("click", function() {

    // Toggle button
    $(this).toggleClass("selected-tag-button");

    // Remove included-item class from all items
    $(".item" ).removeClass("included-item");

    // Pass the button text into variable
    var buttonName = $(this).text().slice(2);

    // Create array with button text for all active buttons
    var buttonArray = $(".selected-tag-button").map(function() {
      return $(this).text().slice(2);
    }).get();
    console.log(buttonArray);

    // Add included-item class to divs containing the button text
    $('li:contains("' + buttonName + '")').parents().parents().addClass("included-item");

    // If all buttons are inactive, add included-item class to all items
    if ($(".selected-tag-button").length == 0 ) {
      $(".item" ).addClass("included-item");
    }

  });

});
4

2 に答える 2

0

このフィドルを考えてみましょう:

http://jsfiddle.net/6qavvth8/

for(i=0; i<buttonArray.length;i++){
    contains += ':contains("' + buttonArray[i] + '")'; 
}
$('ul' + contains).parents().addClass("included-item");

ボタン配列をループして jquery セレクターを作成し、:contains() を追加し続けます。

于 2015-10-16T16:17:16.503 に答える
0

@bingo のソリューションのわずかな変更。完全に動作します、ありがとう。

$(document).ready(function() {

  $("li.tag-button").on("click", function() {

    // Toggle button
    $(this).toggleClass("selected-tag-button");

    // Remove included-item class from all items
    $(".item" ).removeClass("included-item");

    // Create array with button text for all active buttons
    var buttonArray = $(".selected-tag-button").map(function() {
      return $(this).text().slice(2);
    }).get();

    // Add included-item class to divs containing the button text
    var contains = ""; 
    for(i = 0; i < buttonArray.length; i++){
      contains += ':contains("' + buttonArray[i] + '")'; 
    }
    $('ul' + contains).parents().addClass("included-item");    

    // If all buttons are inactive, add included-item class to all items
    if ($(".selected-tag-button").length == 0 ) {
      $(".item" ).addClass("included-item");
    }

  });

});
于 2015-10-16T17:09:03.533 に答える