0

人々がクリックするラジオボタンに応じて、さまざまな div を非表示および表示しようとしています。

  • Jquery は正常にロードされています。ページのロード時にアラートを設定してみました。

  • 非常によく似たコード、セレクター メソッドなどは、同じサーバー上の同じインクルードを持つ同じディレクトリ内のページで機能しました。

入力ボックスのコードは次のとおりです。

            <label class="radio"><input type="radio" name="input_sandwich_choice" value="Panini">Panini</label>
            <label class="radio"><input type="radio" name="input_sandwich_choice" value="Sandwich">Sandwich</label>
            <label class="radio"><input type="radio" name="input_sandwich_choice" value="Baguette">Baguette</label>

div は次のとおりです。

        <div id="div_bread_options" class="collapse span3"> <!--2.2-->
            <h4>Which bread would you like?</h4>
            <label class="radio"><input id="id_option_bread_white" type="radio" name="input_bread_choice" value="white">White</label>
            <label class="radio"><input id="id_option_bread_brown" type="radio" name="input_bread_choice" value="brown">Brown</label>
            <label class="radio"><input id="id_option_bread_granary" type="radio" name="input_bread_choice" value="granary">Granary</label>
            <label class="radio"><input hidden id="id_option_bread_none" type="radio" name="input_bread_choice" value=""></label>
        </div> <!--2.2-->

        <div id="div_butter_options" class="collapse span3"> <!--2.3-->
            <h4>Would you like butter?</h4>
            <label class="radio"><input type="radio" id="id_option_butter_yes" name="input_butter_choice" value="Yes">Yes</label>
            <label class="radio"><input type="radio" id="id_option_butter_no" name="input_butter_choice" value="No">No</label>
            <label class="radio"><input hidden type="radio" id="id_option_butter_none" name="input_butter_choice" value=""></label>
        </div> <!--2.3-->

最後に、Jquery は次のとおりです。

<script>

    $("input[name=input_sandwich_choice]").click(function() {
    var checkedValue = $("input[name='input_sandwich_choice']:checked").val();
    console.log(checkedValue);
    if (checkedValue == "Panini") {
        $("#div_bread_options").collapse('hide');
        $("#div_butter_options").collapse('show');
    } else if (checkedValue == "Sandwich") {
        $("#div_bread_options").collapse('show');
        $("#div_butter_options").collapse('hide');
    } else if (checkedValue == "Baguette") {
        $("#div_bread_options").collapse('show');
        $("#div_butter_options").collapse('hide');
    } else {
        alert("Oops.");
    }
});​​
    </script>

なぜそれが機能しないのか理解できません...どんな助けも大歓迎です! ありがとう

4

3 に答える 3

0

実際によくある問題 - ブラウザがドキュメント全体をロードする前にスクリプトが実行されます。本質的に、体はまだ存在していません。

最も簡単な解決策は、「ドキュメント準備完了」関数内にドキュメントを変更するコードを含めることです。JQuery はこれを簡単にします。

$(function() {
  // document manipulation code here
});

スクリプトがたまたま < body > タグの下にある場合、私は銃を飛ばした可能性があり、コードに別の問題がある可能性があることに注意してください。

于 2013-07-17T20:11:15.097 に答える
0

ヘッダーにこのようなものがあれば

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

これ以降はどこでも使用できます。

 $(document).ready(function() {
      $("input[name=input_sandwich_choice]").click(function() {
    var checkedValue = $("input[name='input_sandwich_choice']:checked").val();
    console.log(checkedValue);
    if (checkedValue == "Panini") {
        $("#div_bread_options").collapse('hide');
        $("#div_butter_options").collapse('show');
    } else if (checkedValue == "Sandwich") {
        $("#div_bread_options").collapse('show');
        $("#div_butter_options").collapse('hide');
    } else if (checkedValue == "Baguette") {
        $("#div_bread_options").collapse('show');
        $("#div_butter_options").collapse('hide');
    } else {
         console.log("Oops.");
    }
});​​
    });

console.logまた、代わりにを使用することをお勧めしますalert。この方法では、スクリプトが毎回停止して何かを警告することはありません。

最終的には次のようになります::::

<html>
<head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <title></title>
</head>
<body>
<label class="radio"><input type="radio" name="input_sandwich_choice" value="Panini">Panini</label>
<label class="radio"><input type="radio" name="input_sandwich_choice" value="Sandwich">Sandwich</label>
<label class="radio"><input type="radio" name="input_sandwich_choice" value="Baguette">Baguette</label>

<div id="div_bread_options" class="collapse span3"> <!--2.2-->
            <h4>Which bread would you like?</h4>
            <label class="radio"><input id="id_option_bread_white" type="radio" name="input_bread_choice" value="white">White</label>
            <label class="radio"><input id="id_option_bread_brown" type="radio" name="input_bread_choice" value="brown">Brown</label>
            <label class="radio"><input id="id_option_bread_granary" type="radio" name="input_bread_choice" value="granary">Granary</label>
            <label class="radio"><input hidden id="id_option_bread_none" type="radio" name="input_bread_choice" value=""></label>
        </div> <!--2.2-->

        <div id="div_butter_options" class="collapse span3"> <!--2.3-->
            <h4>Would you like butter?</h4>
            <label class="radio"><input type="radio" id="id_option_butter_yes" name="input_butter_choice" value="Yes">Yes</label>
            <label class="radio"><input type="radio" id="id_option_butter_no" name="input_butter_choice" value="No">No</label>
            <label class="radio"><input hidden type="radio" id="id_option_butter_none" name="input_butter_choice" value=""></label>
        </div> <!--2.3-->
</div>

<script type="text/javascript">
 $(document).ready(function() {
      $("input[name=input_sandwich_choice]").click(function() {
    var checkedValue = $("input[name='input_sandwich_choice']:checked").val();
    console.log(checkedValue);
    if (checkedValue == "Panini") {
        $("#div_bread_options").collapse('hide');
        $("#div_butter_options").collapse('show');
    } else if (checkedValue == "Sandwich") {
        $("#div_bread_options").collapse('show');
        $("#div_butter_options").collapse('hide');
    } else if (checkedValue == "Baguette") {
        $("#div_bread_options").collapse('show');
        $("#div_butter_options").collapse('hide');
    } else {
         console.log("Oops.");
    }
});​​
    });


</script>

</body>
</html>
于 2013-07-17T20:16:52.627 に答える