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
,并找到包含以下内容的段落:与该数据类型
的值相同的字符串,并隐藏任何不包含该字符串的段落。
最佳答案
您的想法是正确的,但您试图将 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')
关于jquery - 拉取数据属性值并隐藏 P 而不匹配字符串,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42450865/