试图隐藏/显示div上单选按钮单击

我试图隐藏和显示不同的divs取决于哪些单选按钮人点击。试图隐藏/显示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>

的divs是：

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

只是不能确定为什么这不起作用...任何帮助非常感谢！谢谢

来源

2013-07-17 user2536206

'alert'并不意味着你已加载的jQuery ...什么你进入控制台？ – jycr753

然后您将该脚本放在HTML之后，否则您需要一个DOM准备好的处理程序！ – adeneo

试试这个，而不是：'if（window.jQuery）{alert（“jquery loaded”）;}' – jycr753

所以如果你有这样的事情在你的头

<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-17 20:16:52 jycr753

我如何访问控制台是铬？我也加了其他，没有发生任何事情，所以eseems可能jquery不工作，但它很奇怪，因为我有它在另一个工作文件在同一个目录中使用相同的包括 – user2536206

，它是奇怪的......右击页面上的'click'，'检查元素'将显示一个新窗口，从标签 – jycr753

https://developers.google中选择控制台。 com/chrome-developer-tools/docs/console – jycr753

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

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

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

请注意，如果你的脚本恰好是< body>标签的下方，然后我可能偷步，并有可能是另一个问题在你的代码。

来源

2013-07-17 20:11:15 Katana314

谢谢，我会试试这个，但我已经尝试使用文件准备...当然这只是运行每次点击按钮而不是在加载时？ – user2536206

问题是“什么按钮”？你是对的，你的代码的主体不会运行 - 但JQuery必须在那里有按钮，以便为它们提供事件监听器。例如，如果您在加载页面后向页面添加了另一个按钮，则它将不具有与其他页面相同的事件侦听器。 – Katana314

啊！很高兴知道非常感谢。没有修复它遗憾:( – user2536206

使用最新的jQuery从谷歌CDN库

<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-17 20:26:05 Pank

试图隐藏/显示div上单选按钮单击

回答

相关问题