Question

$(':radio').change(function(event) {
  var id = $(this).data('id');
  $('#' + id).addClass('none').siblings().removeClass('none');
});

.none {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>

<input type="radio" name='thing' value='valuable' data-id="bank" />
<input type="radio" name='thing' value='valuable' data-id="school" />
<hr />
<div id="bank" class="none">Bank</div>
<div id="school" class="none">School</div>

我想使用单选按钮显示和隐藏div但是这段代码对我不起作用我在堆栈中得到了这段代码。它在jfiddle中似乎很好但是当我使用它时它不起作用。

Answer 1

将你的jquery代码放在document.ready中，如下所示：

<script src="js/jquery-3.1.1.js"></script>
<script>
    $(document).ready(function(){
        $(':radio').change(function (event) {
            var id = $(this).data('id');
            $('#' + id).addClass('none').siblings().removeClass('none');
        });
    });
</script>

Answer 2

将您的脚本标记放在<body>标记的底部或使用defer

Answer 3

您必须使用Document Ready方法。

在文档准备好之前，页面无法安全操作。＆＃34; jQuery为您检测这种准备状态。包含在$（document）.ready（）中的代码只有在页面文档对象模型（DOM）准备好执行JavaScript代码时才会运行。

<script>
$(document).ready(function(){
  $(':radio').change(function (event) {
     var id = $(this).data('id');
     $('#' + id).addClass('none').siblings().removeClass('none');
  });
});
</script>

Answer 4

试试这个：如果有效，我会解释原因

.none {
display:none;
}

<html>
<head>
<title>
</title>
</head>
<body>
  <input type="radio" name='thing' value='valuable' data-id="bank" />
  <input type="radio" name='thing' value='valuable' data-id="school" />
  <hr />
  <div id="bank" class="none">Bank</div>
  <div id="school" class="none">School</div>
        
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script>
  $(document).ready(function(){
    $(':radio').change(function (event) {
      var id = $(this).data('id');
      $('#' + id).addClass('none').siblings().removeClass('none');
    });
  });
</script>
</body>
</html>

Answer 5

试试这个：

$(document).ready(function(){
    $('input:radio').click(function (event) {
        var id = $(this).data('id');
        $('#' + id).addClass('none').siblings().removeClass('none');
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
.none {
display:none;
}
</style>
<input type="radio" name='thing' value='valuable' data-id="bank" />
<input type="radio" name='thing' value='valuable' data-id="school" />
<hr />
<div id="bank" class="none">Bank</div>
<div id="school" class="none">School</div>

如何使用jQuery中的单选按钮切换div可见性？

5 个答案: