Question

我正在尝试隐藏并显示不同的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>

只是想不通为什么不起作用...任何帮助非常感谢！感谢

Answer 1

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

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

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

请注意，如果您的脚本恰好低于＆lt;身体＆gt;标签，然后我可能已经跳了枪，你的代码中可能还有另一个问题。

Answer 2

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

<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>

Answer 3

使用谷歌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>

试图通过单选按钮点击隐藏/显示div

3 个答案: