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

所以如果你的标题中有这样的东西

<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 回答
0

实际上是常见问题 - 您的脚本在浏览器加载整个文档之前运行；本质上，身体还不存在。

最简单的解决方案是在“文档就绪”函数中包含任何修改文档的代码。JQuery 使这变得简单。

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

请注意，如果您的脚本恰好位于 <body> 标记之下，那么我可能已经抢了先机，并且您的代码中可能存在另一个问题。

于 2013-07-17T20:11:15.097 回答
0

使用来自 google CDN 的最新 jQuery 库

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


<script type="text/javascript">
$(document).ready(function(){
$("input[name='input_sandwich_choice']").on("click",function() {
        var checkedValue = $("input[name='input_sandwich_choice']:checked").val();
        alert(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>
于 2013-07-17T20:26:05.100 回答