Как использовать строку атрибутов для выбора элементов с помощью Jquery

Question

Я постараюсь сформулировать это так, чтобы это было понятно, но мне трудно искать ответы, когда трудно выразить словами то, чего я пытаюсь достичь (беды того, что я новичок в веб-разработке, но все жевеселиться).

У меня есть куча div, которые содержат обзоры, и я хочу иметь возможность выбирать теги в списке в другом div, который затем добавит класс скрытия для всех обзоров, у которых нет одного из «selectedTags».Я сохраняю теги для каждого отзыва в атрибуте «data-tags» отзывов

<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, в которых они есть.из выбранных тегов.

Вот некоторые jquery, которые запускаются, когда вы щелкаете один из тегов в теге div, который является просто списком каждого тега в базе данных.Каждый тег имеет класс .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 () .?

Я довольно плохо знаком с веб-разработчиком в целом и плохо разбираюсь во многих языках и языках, поэтому любая помощь приветствуется.Я искал несколько дней и нашел много полезной информации, но ничего не могу найти, пытаясь сопоставить элементы со списком атрибутов в массиве или в строке, разделенной пробелом.

Конечная цель заключается в том, чтобы в любое времяВы щелкаете по новому тегу или щелкаете по уже выбранному тегу, отменив его выбор, код .click () запускается, находит все теги, которые в данный момент «выбраны», а затем добавляет класс .hide ко всем элементам обзора, которые не имеютлюбой из выбранных тегов в их атрибуте data-tags.

Я не знаю, усложнит ли это вещи, поскольку некоторые обзоры будут иметь перекрывающиеся теги, как в примере, у обоих обзоров есть «облака» в тегах, так что еслиВы выбираете тег облака, который мне нужен для отображения, если вы затем добавляете тег «montana», то они оба остаются видимыми, но если вы затем отмените выбор тега «облака», во втором обзоре теперь будет применен класс .hide иисчезнуть.

Если у кого-нибудь есть решение jquery, прекрасно, уже его используете.Если у вас простой подход к JS, мне тоже понравится.

Answer 1

Вот упрощенная версия того, чего вы хотите достичь, предполагая, что есть одна кнопка тега с идентификатором 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");
    }
  }
}

Здесь мы ищем атрибут data-tags каждого элемента div, и если он не содержит innerHTML кнопки, он получает класс hide.

Полагаю, вы могли бы легко построить этот пример, чтобы получить то, что вы хотите.Надеюсь, это поможет!

Answer 2

Часть, которая вам нужна здесь:

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: Поиск слова в строке