如何根据div内容切换div的可见性
[英]How to toggle visibility of a div based on div content
问题描述
我一直在寻找类似的问题，但没有什么能与我想做的完全匹配。
基本上，我正在开发一个简单的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”），但到目前为止还没有任何效果。 通常我收到此错误： 未捕获的TypeError：无法读取未定义的属性'indexOf'
直观地说，我正试图做出以下几点：
if (e.innerHTML.indexOf("foo") != -1) { showHide(e); }
但我不确定如何将该条件与我工作的showHide（）函数集成。 我认为我正在处理'if'语句，但是因为我对javascript很生疏，所以我主要通过反复试验来处理。
只是发布在这里希望我可以得到一些提示/方向。
1 个解决方案
解决方案1
1 2016-06-17 05:27:11
您可以尝试迭代子节点并检查其内部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>
基于下拉列表切换DIV的可见性
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.