我一直在寻找类似的问题，但没有什么与我正在尝试做的完全匹配。
基本上，我正在开发一个简单的 chrome 扩展程序来获得乐趣/自学脚本如何与 chrome 交互。我有一个简单的脚本可以显示/隐藏给定的 div:
function showHide() {
var e = document.getElementsByClassName("Line");
for ( var i=0, len=e.length; i<len; ++i ){
if(e[i].style.display == 'block')
e[i].style.display = 'none';
else
e[i].style.display = 'block';
}
}
如您所料，这会隐藏页面上“Line”的每个实例。下一步是尝试只隐藏包含特定字符串的 div。我一直在玩弄 'innerHTML.indexOf("Line")' 但到目前为止没有任何效果。大多数情况下，我收到此错误:Uncaught TypeError: Cannot read property 'indexOf' of undefined
直觉上，我正在尝试按照以下方式做一些事情:
if (e.innerHTML.indexOf("foo") != -1) { showHide(e); }
但我不确定如何将该条件与我正在使用的 showHide() 函数集成。我认为我在处理“if”语句时草率，但由于我对 javascript 很生疏，所以我主要通过反复试验来工作。
只是发帖在这里希望我能得到一些提示/方向。
最佳答案
您可以尝试遍历子节点并检查它们的内部 Html。查看代码段。
干杯!
var showHide = function(e) {
e.style.display = (e.style.display === 'block') ? 'none' : 'block'
}
function toggle() {
doStuff();
}
function eContainsNodeValue(element, foo){
var childs = element.childNodes;
for (j = 0; j<childs.length; j++){
if (childs[j].innerHTML === foo)
return true;
}
return false;
}
function doStuff() {
var elements = document.getElementsByClassName("Line");
for (i = 0; i< elements.length; i++){
if (eContainsNodeValue(elements[i], 'foo'))
showHide(elements[i]);
}
}#MyDiv {
background-color: #6699ff;
}
.Line {
display: block;
background-color: #000000;
color: #6699ff;
width: 100%;
text-align: center;
}<body id="MyDiv">
<div class="Line" style="display: block">
<h4>I'm a line 1!</h4>
</div>
<div class="Line" style="display: block">
<h4>I'm a line 2!</h4>
</div>
<div class="Line" style="display: block">
<h4>I'm a line 3!</h4>
</div>
<div class="Line" style="display: block">
<h4>I'm a line 4!</h4>
<p>foo</p>
</div>
<div class="Line" style="display: block">
<h4>I'm a line 5!</h4>
<p>bar</p>
</div>
<div class="Line" style="display: block">
<h4>I'm a line 6!</h4>
</div>
<button onclick="toggle()">Toggle foo bar</button>
</body>关于javascript - 如何根据 div 内容切换 div 的可见性，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37873211/