jquery - 拉取数据属性值并隐藏 P 而不匹配字符串

Question

HTML:

<!-- NAV Equivalent -->
<div class="part">
  <a data-type="test">Test</a>
  <a data-type="new">New</a>
</div>

<!-- Items -->    
<div>
  <h5>Example 1</h5>
  <p>Test</p>
</div>

<div>
  <h5>Example 2</h5>
  <p>New</p>
</div>

<!-- Example 3, Test...

jQuery:

$(".part span").click(
  function () {
    var dataType = $(this).attr('data-type');
    $("body").find('p[text*="' + dataType + '"]'):not(:contain("dataType")).addClass("hidden")
  }
);

我认为/希望 jQuery 工作的方式:

当单击.part内的span时，获取该span的data-type，并找到包含以下内容的段落:与该数据类型的值相同的字符串，并隐藏任何不包含该字符串的段落。

jsFiddle: https://jsfiddle.net/CSS_Apprentice/ft5jLka5/2/

Answer 1

您的想法是正确的，但您试图将 jQuery 选择器作为函数调用。

这是一个工作版本。

$(".part span").click(
  function () {
    var dataType = $(this).attr('data-type');
    $('p:not(:contains("' + dataType + '"))').addClass('hidden')

  }
);

.hidden{display:none}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="part">
  <span data-type="test">Test</span>
  <span data-type="new">New</span>
</div>

<!-- Items -->    
<div>
  <h5>Example 1</h5>
  <p>Test</p>
</div>

<div>
  <h5>Example 2</h5>
  <p>New</p>
</div>

此外，正如您提到的，这是一个个人开发工具，您可以使用 javascript ES6 template literals 编写字符串连接。漂亮多了!

$(`p:not(:contains("${dataType}"))`).addClass('hidden')