1

JQueryの練習中にこの問題に遭遇しました。

以下のコードでは、「はい」をクリックすると入力ボックスを表示し、「いいえ」をクリックすると非表示にしようとしています。

INPUT タグに CLASS 属性がある場合、JQuery 構文内の ELSE IF ステートメントは完全に機能します。

しかし、CLASS 属性を ID 属性 (ID="box1", ID="box2") に置き換えると、IF ステートメントのみが機能し、ELSE IF は機能しません (ID と CLASS に適切な Jquery セレクターを使用したことに注意してください。それは問題ではないかもしれません）。

誰かがこれで私を助けてくれますか? 答えは簡単で明白かもしれませんが、私は JQuery の初心者であり、この問題は疑問に思っています。前もって感謝します！

編集：問題のコードは次のとおりです。

PS: このコードをコメントに投稿する際に問題が発生していたので、元のコード スニペットを編集することにしました。お役に立てれば！！！

<style type="text/css">
    #box2{
        display: none;
    }
</style>

<script>
    $(function(){           
        $("#box1").click(function(){
            var x = $(this).val();

            if (x == "Yes")
            {
                $("#box2").css("display", "inline");
            }
            else if (x == "No")
            {
                $("#box2").css("display", "none");
            }               
        }); 
    });
</script>
</head>

<body>  
<input type="radio" name="color" Id="box1" value="Yes"> Yes
<input type="radio" name="color" Id="box1" value="No"> No

<input type="text" size="10" name="exp" Id="box2">
4

3 に答える 3

1

他の人が答えたように、ID は一意でなければなりません。クラスはしません。また、css を hide() と show() を使用するように変更するよりも優れています。

への変更：

if (x == "Yes")  
{  
 $(".box2").show();  
}  
else if (x == "No")  
{  
  $(".box2").hide();  
}

コードを読みやすくする必要があります。また、toggle() の学習も検討してください。

于 2012-06-30T03:45:24.310 に答える
0

http://jsfiddle.net/FsaJH/1/を使用した動作デモid

正しい ID を正しく追加し、DOM で複製しないことを願っています。

何か見逃した場合はお知らせください。これが役立つはずです

コード

 $(function(){           
        $("#box1, #box2").click(function(){  //<== chaining the ids here
            var x = $(this).val();  

            if (x == "Yes")  
            {  
                $(".box2").css("display", "inline");  
            }  
            else if (x == "No")  
            {  
                $(".box2").css("display", "none");  
            }                 
        });   
    });  ​
于 2012-06-30T02:58:39.667 に答える
0

私の勝手な推測ですが、問題のあるコードは実際には表示されません。作業コードを表示します-複数の要素で同じ ID を使用しているということです。ID は一意である必要があります。とは言え、以下のように書きます。

<input type="radio" name="color" id="box1" value="Yes"> Yes  
<input type="radio" name="color" id="box2" value="No"> No  

<input type="text" size="10" name="exp" id="box3">

JavaScript:

$(function(){           
    $("#box1, #box2").click(function(){  
        var x = $(this).val(); 
        $("#box3").css("display", x == "Yes" ? "inline" : "none");       
    });   
});

例：

于 2012-06-30T03:02:55.233 に答える