Question

我希望根据另一个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 。
如果 LEGEND 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>

Answer 1

你忘记了几件事。

函数声明应该是这样的

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>

Answer 2

问题是，当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>

Answer 3

首先，尝试确保调用window.onload：

window.addEventListener('load', ShowHide, false);

function ShowHide()
{...

其次，您应该查看元素的InnerHTML：

if (document.getElementById('LEGEND').innerHTML.match("a") == "a"){...

第三，每个if语句也应包含else（用实际div名替换divName）：

else {
    document.getElementById('divName').style.display = 'none'}

希望有所帮助！

〜的md5sum〜

编辑：

另外，我对此并不是100％肯定，但我相信语法：

window.onload = function ShowHide{

将完全失败。我认为语法应该是：

window.onload = function(){

Answer 4

如果我，我会这样做的。你不需要触摸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>

Answer 5

您需要将style.display属性设置为none。

JS：根据另一个DIV内容隐藏DIV

5 个答案: