JQuery выбрать элемент путем сопоставления слов в данных атрибутов

Question

У меня есть некоторые дивы, как это:

<div class="item item1" data-tags="sky,sea,roads"></div> 
<div class="item item2" data-tags="sea"></div> 
<div class="item item3" data-tags="sky,roads"></div> 
<div class="item item4" data-tags="roads"></div> 

Я пытаюсь сделать фильтр с JQuery, так что если я выбираю «небо», только item1 и item3 будет видимый. Вот что я пытался:

$('body').on('click', '.photo-gallery > nav > ul > li > a', function (event) { 
    var tag = $(this).data('tag'); 
    $('.item').not('.item[data-tags^="'+tag+'"]').fadeOut(); 
    $('.item[data-tags^="'+tag+'"]').fadeIn(); 
}); 

Это работает, если значения атрибута data-tags совершенно уникальны, как мой пример выше. Но я знаю, что это не будет работать, если теги что-то вроде этого:

<div class="item item1" data-tags="skyteck,sea,roads"></div> 
<div class="item item2" data-tags="sky,blue sea,loanly roads"></div> 

Теперь, если я выбираю «небо» он получит бот item1 и item2, поскольку они оба матча «небо». Как я могу решить эту проблему?

У меня есть идея решить эту проблему, которая выбирая все элементы, а затем для каждого элемента создайте теги, разделенные запятыми, как массив, а затем проверьте, находится ли мой тег в этом объекте. Это будет работать, но будет несколько медленным. Это будет мой последний вариант.

Answer 1

Для этого вы можете использовать filter() до split()tags и найти данный тег в результирующем массиве. Попробуйте это:

//$('body').on('click', '.photo-gallery > nav > ul > li > a', function (event) { 
 
$('body').on('click', 'a', function(e) { // simplified for this example 
 
    e.preventDefault(); 
 
    var tag = $(this).data('tag'); 
 
    $('.item').fadeOut().filter(function() { 
 
    return $(this).data('tags').split(',').indexOf(tag) != -1; 
 
    }).fadeIn(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="item item1" data-tags="sky,sea,roads">sky, sea, roads</div> 
 
<div class="item item1" data-tags="skyteck,sea,roads">skyteck, sea, roads</div> 
 
<div class="item item2" data-tags="sea">sea</div> 
 
<div class="item item3" data-tags="sky,roads">sea, roads</div> 
 
<div class="item item4" data-tags="roads">roads</div> 
 

 
<br /><br /> 
 

 
<a href="#" data-tag="sky">Sky</a> 
 
<a href="#" data-tag="roads">Roads</a> 
 
<a href="#" data-tag="sea">Sea</a>

Answer 2

Вы можете достичь этого с помощью фильтра() метод Ваш код JS должен быть

$('body').on('click', '.photo-gallery > nav > ul > li > a', function (event) { 
 
    var tag = $(this).data('tag'); 
 
    $('.item[data-tags]').filter(function(index) { 
 
    var all_tags=$(this).data('tags').split(','); 
 
    return !($.inArray(tag, all_tags) >= 0); 
 
    }).fadeOut(); 
 
    $('.item[data-tags]').filter(function(index) { 
 
     var all_tags=$(this).data('tags').split(','); 
 
     return $.inArray(tag, all_tags) >= 0; 
 
    }).fadeIn(); 
 
});

Answer 3

Попробуйте, как это. "[data-tags * =" + tag + "]", добавив здесь * = он найдет строку aproximatly match. Таким образом,

 $('body').on('click', '.photo-gallery > nav > ul > li > a', function(event) { 
     var tag = $(this).data('tag'); 
     $('.item').not("[data-tags*=" + tag+ "].item").fadeOut(); 
     $("[data-tags*=" + tag+ "].item").fadeIn(); 
     }); 

Надеюсь, что это сработает для вас.