試圖隱藏/顯示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上單選按鈕單擊

回答

相關問題