Question

我将尝试以一种易于理解的方式来表达这个词，但是当很难用语言表达我想要达到的目标时（很难找到Web开发者，但仍然发现它），很难找到答案正玩得开心）。

我有一堆包含评论的div，希望能够在另一个div中的列表中选择标签，然后将隐藏类添加到所有没有“ selectedTags”之一的评论中。我将每个评论的标签存储在评论的“数据标签”属性中

<div class="reviewTile" data-tags="montana sky morning clouds">
  <a href="/review/5c12a0a2e8c8f2111300c903">
    <img class="imgThumb" src="/media/reviews/1.jpg" alt="where are you Image.???">
    <div class="reviewTextSample">
       <p>Here is my first review to see what it will look like and if this will actually work.</p><span class="readMore">...read more</span>
  </div></a>
</div>


<div class="reviewTile" data-tags="wyoming clouds travel park">
  <a href="/review/5c12a0a2e8c8f2111300c904">
    <img class="imgThumb" src="/media/reviews/2.jpg" alt="where are you Image.???">
    <div class="reviewTextSample">
       <p>Here is my Second review to see what it will look like and if this will actually work.</p><span class="readMore">...read more</span>
  </div></a>
</div>

问题是，我不知道如何搜索评论div并返回具有任何选定标签的div。

这里是单击标签div中的一个标签时运行的一些jquery，它只是数据库中每个标签的列表。每个标签都具有.tagText类。

$(".tagText").click( function(){
  //Add selectedTag class to the recently clicked tag so we know it is selected
  $(this).toggleClass("selectedTag");

//Find all tags that are selected
var selectedTags = [];

$(".tagText.selectedTag").each( function(){
 //Store tags in selectedTags array
 selectedTags.push( $(this).html().trim() );
 //selectedTags += $(this).html().trim() + ",";
});  

//Find all elements that do not contain one of the selected tags
//Hide those elements by adding .hide class and scale width to 0

$( ".reviewTile").not("[data-tags*='"+selectedTags+"']" ).addClass("hide");
$( ".reviewTile").not("[data-tags*='"+selectedTags+"']" ).css("width", 0);


console.log("Tags array contains: " + selectedTags);
});

这仅在您第一次选择标签时才有效。我不知道的是搜索属性时如何使用“ selectedTags”数组。这是.map（）可以解决的问题吗？？

对于Web开发人员而言，我一般是相当陌生的，并且不精通许多术语和语言，因此可以提供任何帮助。现在已经搜索了几天，已经找到了很多有用的信息，但是找不到有关尝试将元素与数组或空格分隔的字符串中的属性列表进行匹配的任何信息。

最终目标是，只要您单击一个新标签或单击一个已选择的标签，然后取消选择它，.click（）代码就会运行，查找当前“已选择”的所有标签，然后添加.hide类所有在其data-tags属性中没有任何选定标签的评论div。

我不知道它是否会使事情复杂化，因为某些评论将具有重叠的标签，例如在示例中，两个评论的标签中都带有“ clouds”，因此，如果选择“ clouds”标签，那么我需要同时显示这两个标签“ montana”标签，它们仍然保持可见，但是如果您取消选择“ clouds”标签，则第二个评论现在将应用.hide类并消失。

如果有人有jquery解决方案，那就太好了，已经在使用它了。如果您有普通的JS方法，我也很乐意看到它。

Answer 1

您需要的部分是

var Exp = new RegExp('\\b('+selectedTags.join('|')+')\\b');
  $('.reviewTile').hide().filter(function(){
    return $(this).attr('data-tags').search(Exp) > -1;
  }).show();

简单的例子

$(document).ready(function(){
  //Find all tags that are selected
  var selectedTags = ['wyoming' , 'sky'];
  var Exp = new RegExp('\\b('+selectedTags.join('|')+')\\b');
  $('.reviewTile').hide().filter(function(){
    return $(this).attr('data-tags').search(Exp) > -1;
  }).show();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="reviewTile" data-tags="montana sky morning clouds">
  <a href="/review/5c12a0a2e8c8f2111300c903">
    <img class="imgThumb" src="/media/reviews/1.jpg" alt="where are you Image.???">
    <div class="reviewTextSample">
       <p>Here is my first review to see what it will look like and if this will actually work.</p><span class="readMore">...read more</span>
  </div></a>
</div>


<div class="reviewTile" data-tags="wyoming clouds travel park">
  <a href="/review/5c12a0a2e8c8f2111300c904">
    <img class="imgThumb" src="/media/reviews/2.jpg" alt="where are you Image.???">
    <div class="reviewTextSample">
       <p>Here is my Second review to see what it will look like and if this will actually work.</p><span class="readMore">...read more</span>
  </div></a>
</div>

REF：Jquery search word in string

Answer 2

这里是您要实现的简化版本，假设有一个标记ID为button的标记按钮，其innerHTML是标记名称：

var button = document.getElementById("button");
button.onclick = function() {
  var divs = document.getElementsByTagName("DIV");
  for(var i = 0; i < divs.length; i++) {
    if(!divs[i].getAttribute("data-tags").includes(this.innerHTML)) {
      divs[i].classList.add("hide");
    }
  }
}

这里我们正在搜索每个div的data-tags属性，如果它不包含按钮的innerHTML，则它将获得hide的类。

我想您可以轻松地从此示例中获得所需的内容。希望对您有帮助！

如何使用属性字符串使用Jquery选择元素

2 个答案: