JS: Hiding DIV based on another DIVs content_问答_开发者

JS: Hiding DIV based on another DIVs content

开发者 https://www.devze.com 2022-12-11 21:13 出处：网络

I am looking to hide a number of DIVs based upon the specific text of another 开发者_如何学编程DIV.My Javascript (below) isn\'t working.

I am looking to hide a number of DIVs based upon the specific text of another 开发者_如何学编程DIV. My Javascript (below) isn't working.

The 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>

If the LEGEND DIV contains the text a, then I want it to show only DIV small-a.

If the LEGEND DIV contains the text bA, then I want it to show only DIV small-b and big-a.

The 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>

You are forgetting a couple of things.

A function declaration should be like this

function functionName(args) { }
You have to hide the divs using style.display = "none"

Example:

<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>

The problem is that your code changes the other div elements to block-level elements when div is already a block-level element. You need to set them not to display initially using CSS and then reveal them in the JavaScript.

Try this instead:

<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>

First, try making sure the window.onload is being called:

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

function ShowHide()
{...

Second, you should be looking at the InnerHTML of the element:

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

Third, each if statement should also contain an else (replace divName with real div names):

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

Hope that helps!

~md5sum~

EDIT:

Also, I'm not 100% sure on this, but I believe that the syntax:

window.onload = function ShowHide{

will completely fail. I think that the syntax should be:

window.onload = function(){

If me, I will do like this. you dont need to touch HTML part, everything is done in javascript.

you can extend it to CDEFGH...

and you don't need to set <div id="small-X" style="display: none;"> for each tags too. :-)

<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>

You need to set the style.display property to none.