我试图做的是,当我点击的文本,如果另一个div有包含在本文褪色一个孩子。但它不工作
$('.rel-head').click(function() {
if ($('.art-h .head-art'): contains($(this).text())) {
$(this).parent().fadeIn().siblings().fadeOut();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="art-h">
<div class="head-art">some text</div>
</div>
<div class="art-h">
<div class="head-art">anoter text</div>
</div>
<div class "related-heads">
<h1 class="rel-head">some text</h1>
</div>
:contains
和CONCAT字符串正确。$('.rel-head').click(function() {
if ($('.art-h .head-art:contains('+$(this).text()+')')) {
$(this).parent().fadeIn().siblings().fadeOut();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="art-h">
<div class="head-art">some text</div>
</div>
<div class="art-h">
<div class="head-art">anoter text</div>
</div>
<div class "related-heads">
<h1 class="rel-head">some text</h1>
</div>
这不是很有效的,你点击每个指定项目的每一次搜索整个身体。
这是我会怎么做。
let headArtArray = $('.art-h .head-art'); //Assign it to a variable early to reduce searching
$('.rel-head').click(function() {
let el = $(this);
let text = el.text();
for (let i = 0; i < headArtArray.length; i++) {
if (headArtArray[i].innerText.includes(text)) {
el.parent().fadeIn();
} else {
$(headArtArray[i]).fadeOut();
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="art-h">
<div class="head-art">some text</div>
</div>
<div class="art-h">
<div class="head-art">anoter text</div>
</div>
<div class "related-heads">
<h1 class="rel-head">some text</h1>
</div>