Question

我一直在尝试使用“选择”列表和javascript。我做了一个Javascript函数，隐藏或显示部分HTML代码，但它的工作方式相反，我无法弄清楚我哪里出错，因为代码似乎很直接。

我的JS功能是

<script type="text/javascript" language="javascript">       


    function toggle(id) {

        if(document.getElementById(id).value=='IELTS' || document.getElementById(id).value=='TOEFL')
        {
            if(document.getElementById('dv1').style.display=='block')
            {
                document.getElementById('dv1').style.display='none';
                document.getElementById('dv1').style.visibility='hidden';
            }
        }
        else 
        {
            document.getElementById('dv1').style.display='block';
            document.getElementById('dv1').style.visibility='visible';
            //alert('Its displaying now');
        }


        if(document.getElementById(id).value=='Other')
        {
            if(document.getElementById('dv2').style.display=='block')
            {
                document.getElementById('dv2').style.display='none';
                document.getElementById('dv2').style.visibility='hidden';
            }

        }
        else 
        {
            document.getElementById('dv2').style.display='block';
            document.getElementById('dv2').style.visibility='visible';
        }


        if(document.getElementById(id).value=='none')
        {
                document.getElementById('dv1').style.display='none';
                document.getElementById('dv1').style.visibility='hidden';
                document.getElementById('dv2').style.display='none';
                document.getElementById('dv2').style.visibility='hidden';
        }



    }
</script>

问题是FIRST“if”语句显示/隐藏“dv2”而不是“dv1”而SECOND“if”语句显示/隐藏“dv1”而不是“dv2”尽管所有内容都指定为第一个“if”语句处理“dv1”和SECOND“if”语句处理“dv2”的方式

我错过了解JS如何工作的方式。

此处预定义了一种样式以隐藏html代码

<style type="text/css">
.toggleClass{
    display:none; 
    visibility:hidden;
    } 
</style>
</head>



<body>

<form name="myform" >

这是我在改变时调用JS函数的选择

    <select id="exam" name="exam" onchange="toggle('exam')">
    <option selected="selected" value="none" >Please Choose</option>
    <option value="IELTS">IELTS</option>
    <option value="TOEFL">TOEFL</option>
    <option value="Other">Other</option>
    </select>   
  <br><br>

这是dv1

<div id="dv1" class="toggleClass">
    <table width="50%"  border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td height="600" bgcolor="#CCCCCC">IELTS and TOEFL</td>
      </tr>
    </table>
</div>

这是dv2

<div id="dv2" class="toggleClass">
    <table width="50%"  border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td height="600" bgcolor="#CCCCCC">Other</td>
      </tr>
    </table>
</div>
</form>
</body>
</html>

请注意，如果我更换“dv1”和“dv2”，它会正常工作！

Answer 1

考虑这段代码： -

if(document.getElementById(id).value=='Other')
        {
            if(document.getElementById('dv2').style.display=='block')
            {
                document.getElementById('dv2').style.display='none';
                document.getElementById('dv2').style.visibility='hidden';
            }

        }
        else 
        {
            document.getElementById('dv2').style.display='block';
            document.getElementById('dv2').style.visibility='visible';
        }

从这里可以看出，如果你选择'其他'，那么在这种情况下，div 2将永远不会出现。因为条件适用于下面提到的其他条件： -

else 
        {
            document.getElementById('dv1').style.display='block';
            document.getElementById('dv1').style.visibility='visible';
            //alert('Its displaying now');
        }

将在您验证后显示div1。您正在寻找的脚本必须如下所示： -

<script type="text/javascript" language="javascript">       


    function toggle(id) {

        if(document.getElementById(id).value=='IELTS' || document.getElementById(id).value=='TOEFL')
        {
            if(document.getElementById('dv1').style.display=='block')
            {
               document.getElementById('dv1').style.display='block';
                document.getElementById('dv1').style.visibility='visible';

            }
        }
        else 
        {

的document.getElementById（ 'DV1'）的style.display = '无';

            document.getElementById('dv1').style.visibility='hidden';
            //alert('Its displaying now');
        }


        if(document.getElementById(id).value=='Other')
        {
            if(document.getElementById('dv2').style.display=='block')
            {
                document.getElementById('dv2').style.display='block';
               document.getElementById('dv2').style.visibility='visible';
            }

        }
        else 
        {
            document.getElementById('dv2').style.display='none';
            document.getElementById('dv2').style.visibility='hidden';

        }


        if(document.getElementById(id).value=='none')
        {
                document.getElementById('Table1').style.display='none';
                document.getElementById('Table1').style.visibility='hidden';
                document.getElementById('Table2').style.display='none';
                document.getElementById('Table2').style.visibility='hidden';
        }



    }
</script>

尝试这一点，并知道它是否有效。

Answer 2

FIRST：仅当存在此属性的内联样式时才设置样式的属性。

所以在你的div中你应该插入一个样式属性

<div id="dv1" class="toggleClass" style="visibility:hidden; display:none">

与div2相同

之后......逻辑似乎不正确：

if(document.getElementById(id).value=='IELTS' || document.getElementById(id).value=='TOEFL')

此行应该是第一个div（div1）可见但在此之后：

document.getElementById('dv1').style.display='none';
document.getElementById('dv1').style.visibility='hidden';

你把它藏起来了！

javascript以相反的方式工作

2 个答案: