$(':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中似乎很好但是当我使用它时它不起作用。
答案 0 :(得分:0)
将你的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>
答案 1 :(得分:0)
将您的脚本标记放在<body>
标记的底部或使用defer
答案 2 :(得分:0)
您必须使用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>
答案 3 :(得分:0)
试试这个:如果有效,我会解释原因
.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>
答案 4 :(得分:0)
试试这个:
$(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>