2

私はjavascriptと一緒に「選択」リストを使おうとしています。HTMLコードの一部を非表示または表示するJavascript関数を実行しましたが、逆の方法で機能しており、どこが間違っているのかわかりません。コードは単純なようです。

私の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」ステートメントが「dv1」の代わりに「dv2」を表示/非表示にし、2番目の「if」ステートメントが「dv2」の代わりに「dv1」を表示/非表示にすることです。最初の「if」ステートメントは「dv1」を処理し、2番目の「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」を入れ替えれば正常に動作することに注意してください。

4

2 に答える 2

0

FIRST: スタイルのプロパティは、このプロパティのインライン スタイルがある場合にのみ設定されます。

したがって、divにスタイル属性を挿入する必要があります

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

div2も同様

その後...論理が正しくないようです：

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

div1この行は最初の div ( )で表示されるはずですが、その後は次のようになります。

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

あなたはそれを隠します！

于 2012-09-24T09:00:42.387 に答える
0

次のコード ブロックを検討してください:-

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条件のように条件が真であるため:-

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>

これを試してみて、それが機能するかどうかを確認してください。

于 2012-09-24T08:46:56.787 に答える