需要 JQuery 或 JavaScript 才能将 .contains() 与 && 逻辑一起使用

Question

我正在尝试使用给定的关键字按钮在原本静态的项目列表上构建一个简单的缩小过滤器。

按钮位于无序列表中，选中后会添加 class“.selected-tag-button”。

项目是 divs class“.item”，当它们处于活动状态时得到 class“.included-item”。 div 内部是另一个 UL，其列表项包含与按钮上的文本节点匹配的关键字。

现在它正在工作，除了，而不是使用仅包含单击按钮的关键字的 "buttonName"，我想使用包含所有选定按钮的数组的 "buttonArray"关键词.

我想我需要某种功能，但我不确定从哪里开始。如果选择了多个，我希望结果仅限于包含所有选定关键字的项目。我已经能够找出的所有解决方案都将 return 包含数组中任何关键字的 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");
    }

  });

});

Answer 1

考虑这个 fiddle:

http://jsfiddle.net/6qavvth8/

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

遍历按钮数组以构建 jquery 选择器并继续添加 :contains()

Answer 2

@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");
    }

  });

});

需要 JQuery 或 JavaScript 才能将 .contains() 与 && 逻辑一起使用

Need JQuery or JavaScript to use .contains() with && logic

javascript

jquery

filtering

narrowing