Fatal编程技术网

javascript以相反的方式工作

javascript

javascript以相反的方式工作,javascript,Javascript,我一直在尝试使用选择列表和javascript。我做了一个Javascript函数来隐藏或显示html代码的一部分，但它的工作方式正好相反，我不知道哪里出了问题，因为代码看起来很简单 我的JS函数是 <script type="text/javascript" language="javascript"> function toggle(id) { if(document.getElementById(id).value=='IELTS'

我一直在尝试使用选择列表和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>
问题在于，第一个if语句显示/隐藏dv2而不是dv1，第二个if语句显示/隐藏dv1而不是dv2，尽管所有内容都指定为第一个if语句处理dv1，第二个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，效果很好

考虑这段代码：-

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 two将永远不会出现。因为该条件为真，其中else条件如下所述：-

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='none'

            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>
尝试一下，让我知道它是否有效。

考虑一下这段代码：-

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 two将永远不会出现。因为该条件为真，其中else条件如下所述：-

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='none'

            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>
尝试一下，让我知道它是否有效。

首先：仅当此属性有内联样式时，才会设置style属性

因此，在div中应该插入一个style属性

<div id="dv1" class="toggleClass" style="visibility:hidden; display:none">
该行在第一个div div1中应可见，但在此之后：

document.getElementById('dv1').style.display='none';
document.getElementById('dv1').style.visibility='hidden';
你把它藏起来

首先：仅当存在style属性的内联样式时，才会设置style属性

因此，在div中应该插入一个style属性

<div id="dv1" class="toggleClass" style="visibility:hidden; display:none">
该行在第一个div div1中应可见，但在此之后：

document.getElementById('dv1').style.display='none';
document.getElementById('dv1').style.visibility='hidden';
你把它藏起来

你能把它摆弄一下吗？太长了，如果能在Fiddle上看到代码就太好了。好吧，我删除了javascript函数中的所有注释，以便将其显示为一个块，这样更好吗？给我一分钟。谢谢，我会处理的！！只需注意：只有在html代码中有style属性的内联样式时，才会设置style属性。您可以使用jQuery或其他JS库吗？请修改它好吗？太长了，如果能在Fiddle上看到代码就太好了。好吧，我删除了javascript函数中的所有注释，以便将其显示为一个块，这样更好吗？给我一分钟。谢谢，我会处理的！！请注意：只有在html代码中存在style属性的内联样式时，才会设置style属性。您可以使用jQuery或其他JS库吗？