[英]JS: Hiding DIV based on another DIVs content
我想根据另一个DIV的特定文本隐藏许多DIV。 我的Javascript（如下）无法正常工作。
HTML：
<div id="LEGEND">abAB</div>
<div id="small-a"></div>
<div id="small-b"></div>
<div id="big-a"></div>
<div id="big-b"></div>
如果LEGEND DIV包含文本a，那么我希望它仅显示DIV small-a 。
如果“ 传奇” DIV包含文本bA，那么我希望它仅显示DIV small-b和big-a 。
Javascript：
<script>
window.onload = function ShowHide{
if (document.getElementById('LEGEND').indexOf("a") > 0){
document.getElementById('small-a').style.display = 'block';}
if (document.getElementById('LEGEND').indexOf("b") > 0){
document.getElementById('small-b').style.display = 'block';}
if (document.getElementById('LEGEND').indexOf("A") > 0){
document.getElementById('big-a').style.display = 'block';}
if (document.getElementById('LEGEND').indexOf("a") > 0){
document.getElementById('big-b').style.display = 'block';}
</script>
您忘记了几件事。
函数声明应该像这样
function functionName(args) { }
您必须使用style.display =“ none”隐藏div
例：
<div id="LEGEND">abB</div>
<div id="small-a" style="display: none;">This is small-a</div>
<div id="small-b" style="display: none;">This is small-b</div>
<div id="big-a" style="display: none;">This is big-a</div>
<div id="big-b" style="display: none;">This is big-b</div>
<script>
function showElement(id) {
document.getElementById(id).style.display = "block";
}
window.onload = function ShowHide() {
var legend = document.getElementById("LEGEND").innerHTML;
if(legend.indexOf("a") != -1) showElement("small-a");
if(legend.indexOf("b") != -1) showElement("small-b");
if(legend.indexOf("A") != -1) showElement("big-a");
if(legend.indexOf("B") != -1) showElement("big-b");
}
</script>
问题在于，当div已经是块级元素时，您的代码会将其他div元素更改为块级元素。 您需要设置它们，使其最初不使用CSS显示，然后在JavaScript中显示它们。
尝试以下方法：
<div id="LEGEND">abAB</div>
<div id="small-a" style="display: none;"></div>
<div id="small-b" style="display: none;"></div>
<div id="big-a" style="display: none;"></div>
<div id="big-b" style="display: none;"></div>
<script type="text/javascript">
window.onload = function() {
if (document.getElementById('LEGEND').indexOf('a') > 0) {
document.getElementById('small-a').style.display = 'block';
...
// etc.
}
}
</script>
首先，尝试确保正在调用window.onload：
window.addEventListener('load', ShowHide, false);
function ShowHide()
{...
其次，您应该查看元素的InnerHTML：
if (document.getElementById('LEGEND').innerHTML.match("a") == "a"){...
第三，每个if语句还应包含一个else（将divName替换为真实的div名称）：
else {
document.getElementById('divName').style.display = 'none'}
希望有帮助！
〜md5sum〜
编辑：
另外，我对此不是100％肯定，但是我相信语法：
window.onload = function ShowHide{
将完全失败。 我认为语法应为：
window.onload = function(){
如果是我，我会这样。 您无需触摸HTML部分，所有操作均在javascript中完成。
您可以将其扩展到CDEFGH ...
而且您也不需要为每个标签设置<div id="small-X" style="display: none;"> 。 :-)
<body>
<script>
window.onload=function(){
x=document.getElementsByTagName("div");
//first hide everything with small- or big-
for(i in x)
if(/small-|big-/.test(x[i].id))
x[i].style.display="none";
//then turn on each tags based on LEGEND
x= document.getElementById("LEGEND").innerHTML;
for(i=0;i<x.length;i++)
document.getElementById((x[i]<='Z'?'big-':'small-')+x[i].toLowerCase()).style.display='block';
}
</script>
<div id="LEGEND">aAB</div>
<div id="small-a">a</div>
<div id="small-b">b</div>
<div id="big-a">A</div>
<div id="big-b">B</div>
</body>
您需要将style.display属性设置为none 。
JS：如何根据子div的内容隐藏具有多个嵌套div的父div
[英]JS: How to hide parent div with multiple nested divs, based on child div's content
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.