如何解决如果另一个元素上有特定的文本字符串,如何隐藏 div?
我试图只在页面上显示 'KR-KJSC-MICROBIT'
和 'KR-KJSC-D'
等特定文本/产品时才显示 <div class="important">SHOW IF CERTAIN PRODUCTS ARE IN THE CART/THANK YOU PAGE</div>
<div class="cart-line-product-info>
<span class="cart-product-code">
<a class="product-code">Code: KR0KJSC-MICROBIT</a>
</span>
</div>
<div class="cart-line-product-info>
<span class="cart-product-code">
<a class="product-code">Code: KR-KJSC-D</a>
</span>
</div>
。当这些文本不在页面上时,应隐藏此元素。任何人都可以帮助我吗?
{{1}}
解决方法
您可以使用要匹配的特定单词设置变量。 获取 html 元素。 遍历产品代码(锚点)。 如果 words 数组包含锚元素的 textContent,则显示重要元素:
let words = ['KR0KJSC-MICROBIT','KR-KJSC-D']
let anchors = document.querySelectorAll(".product-code")
let importants = document.querySelectorAll(".important");
for(let i = 0; i < anchors.length; i++){
if(words.includes(anchors[i].textContent.replace('Code: ',''))){
importants.forEach(x => x.style.display = 'block')
} else {
importants.forEach(x => x.style.display = 'none')
}
}
<div class="important">SHOW IF CERTAIN PRODUCTS ARE IN THE CART/THANK YOU PAGE</div>
<div class="cart-line-product-info">
<span class="cart-product-code">
<a class="product-code">Code: KR0KJSC-MICROBIT</a>
</span>
</div>
<div class="cart-line-product-info">
<span class="cart-product-code">
<a class="product-code">Code: KR-KJSC-D</a>
</span>
</div>
这是一种方法。不是最好的解决方案,但如果您在页面末尾添加 js 脚本会起作用。
const codeElements = document.querySelectorAll(".product-code");
let codes = []
codeElements.forEach( element => codes.push(element.innerHTML))
if(!codes.includes("Code: KR-KJSC-D")) {
document.querySelector(".important").style.display = "none"
}
<div class="important">SHOW IF CERTAIN PRODUCTS ARE IN THE CART/THANK YOU PAGE</div>
<div class="cart-line-product-info>
<span class="cart-product-code">
<a class="product-code">Code: KR0KJSC-MICROBIT</a>
</span>
</div>
<div class="cart-line-product-info>
<span class="cart-product-code">
<a class="product-code">Code: KR-KJSC-D</a>
</span>
</div>
let pageSource = document.documentElement.innerHTML
// regex match for target strings against page source
if(pageSource.match(/KR0KJSC-MICROBIT|KR-KJSC-D/g)){
$('.important').show()
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。