Question

我在页面上有许多元素，每个元素中都有一个带有数据标记的div。每个元素都有一定的数据标记值，有些元素具有相同的值。

我正在尝试在单击div时根据数据标记值对元素进行排序。出于某种原因，我无法找到最好的方法。这是我的代码：

$(document).ready(function ($) {
    $(".tag-pill img").on('click', function() {
        var tagClicked = $(this).attr("data-tag");
        $('#page-card .col-lg-4').hide();

        $('#page-card .col-lg-4').each(function() {
            if ($(this + '[data-tag="' + tagClicked + '" ]').length > 0) {
                $(this).show();
            }
        })
    })

});

任何帮助都会非常感激！感谢

Answer 1

这是一个工作片段：

＆＃13;

const $set = $(".col-lg-4") // Cache for performance

$(".tag-pill img").click(e => {
  let tagClicked = e.target.attributes["data-tag"].nodeValue
  console.log(`tagClicked = ${tagClicked}`)

  $set.show() // Show all
    .find(`[data-tag='${tagClicked}']`) // Finds a subset
    .hide() // Hide the subset
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tag-pill" data-tag="it works">
   <img data-tag="It works!" src="http://via.placeholder.com/100x50" /> Click the image
</div>

<div class="col-lg-4">
  <p data-tag="It works!">Should disappear</p>
  <p data-tag="It works!">Should disappear</p>
  <p>Should remain visible</p>
  <p data-tag="It works!">Should disappear</p>
  <p>Should remain visible</p>
  <p data-tag="It works!">Should disappear</p>
</div>

＆＃13;

而不是昂贵的$(this).attr()（在每次点击时构建一个jQuery对象），您可以使用e.target.attributes["data-tag"].nodeValue本地获取所需的值

Answer 2

你可以这样展示，

$(document).ready(function ($) {
    $(".tag-pill img").on('click', function() {
        var tagClicked = $(this).attr("data-tag");
        $('#page-card .col-lg-4').hide();

        $('#page-card .col-lg-4[data-tag="' + tagClicked + '" ]').show();

});

Answer 3

这个怎么样？

$(document).ready(function ($) {
    $(".tag-pill img").on('click', function() {
        var tagClicked = $(this).attr("data-tag");
        $('#page-card .col-lg-4').hide();

        $('#page-card .col-lg-4').each(function() {
            if ($(this).attr("data-tag") == tagClicked) {
                $(this).show();
            }
        })
    })

});

Answer 4

你不需要任何一个，如果我理解你这样的东西应该有效：

$(document).ready(function ($) {
  $(".tag-pill img").on('click', function() {
      var tagClicked = $(this).attr("data-tag");
      $('#page-card .col-lg-4').hide();
  /* 
  * show all elements with a specific data attribute
  */
  $('[data-tag="' + tagClicked + '" ]').show(); 
    })
 });

在点击时只显示与其具有相同数据的元素？

4 个答案: