字段啟用禁用javascript不起作用

Question

我有兩個單選按鈕，我想根據用戶在單選按鈕中選擇的值在html頁面上顯示一些值。

我的html文件：

<form action="">
<input type="radio" name="calenders" value="calendar_details_b2b">B2B
<br>
<input type="radio" name="calenders" value="calendar_details_b2c">B2C
</form>
<div id="calendar_details_b2c" >
   content of B2C
</div>
<div id="calendar_details_b2b">
   content of B2B
</div>

這是運行正常的JS小提琴： https : //jsfiddle.net/0b0xp5xm/9/

現在，當我更改ID時，它不起作用， https：//jsfiddle.net/vjLnou8h/1/

編輯

我已將此代碼添加到我在new.hrml.erb頁面上呈現的Rails應用程序_form.html.erb中。

<script    src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {

  $('input[type=radio][name=calenders]').change(function () {
  $('#calendar_details_b2b').css("display","none");
  $('#calendar_details_b2c').css("display","none");
  console.log($(this).val());
  var fieldToShow = $(this).val();
  $("#" + fieldToShow).css("display","block");
  });

});
</script>

但是它仍然無法正常工作。

Answer 1

添加JQuery引用后，它就可以正常工作。

https://jsfiddle.net/vjLnou8h/2/

 <html> <head> <style> #data_Analysis, #study_Design { display: none; } </style> </head> <body> <form action=""> <input type="radio" name="calenders" value="study_Design">B2B <br> <input type="radio" name="calenders" value="data_Analysis">B2C </form> <div id="study_Design">content of B2B</div> <div id="data_Analysis" >content of B2C</div> <!-- It's generally better to put your scripts just before the <body> tag closes because by the time the browser gets that far, the DOM has been read. Also, it can speed up page load times. --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script> $('input[type=radio][name=calenders]').change(function () { $('#study_Design').css("display","none"); $('#data_Analysis').css("display","none"); console.log($(this).val()); var fieldToShow = $(this).val(); $("#" + fieldToShow).css("display","block"); }); </script> </body> </html>

字段啟用禁用javascript不起作用

問題描述

1 個解決方案

解決方案1
0 已采納 2017-01-26 20:12:20

字段啟用禁用javascript不起作用

問題描述

1 個解決方案

解決方案1 0 已采納 2017-01-26 20:12:20

解決方案1
0 已采納 2017-01-26 20:12:20