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 回答