用jQuery编写这篇文章的代码最少
用jQuery编写这篇文章的代码最少
提问于 2014-02-03 08:55:39
通常我是后端开发人员，所以我对javascript和jQuery不太熟悉。我有3个单选按钮，我想显示一个图像旁边的单选按钮，已被选中。目前，我正在用javascript这样做。每个单选按钮都有一个传递id作为参数的onClick方法。然后这个方法就可以做到这一点。
function toggle(id) {
var e = document.getElementById(id);
if(e.id == 'rechnung0') {
document.getElementById('rechnung0').style.cssText= 'display:block;float:right;';
document.getElementById('rechnung1').style.cssText= 'display:none;float:right;';
document.getElementById('rechnung2').style.cssText= 'display:none;float:right;';
}
if(e.id == 'rechnung1') {
document.getElementById('rechnung0').style.cssText= 'display:none;float:right;';
document.getElementById('rechnung1').style.cssText= 'display:block;float:right;';
document.getElementById('rechnung2').style.cssText= 'display:none;float:right;';
}
if(e.id == 'rechnung2') {
document.getElementById('rechnung0').style.cssText= 'display:none;float:right;';
document.getElementById('rechnung1').style.cssText= 'display:none;float:right;';
document.getElementById('rechnung2').style.cssText= 'display:block;float:right;';
}
}但是使用jQuery必须有一个更快的方法。不是有吗？比如，当其中一个radio_buttons被选中时。名称是billingaddress，那么组中没有被选中的每个人都会得到显示none的css，而被选中的组中的每个人都会得到块样式。
如何使用jquery实现这一点？
回答 5
Stack Overflow用户
回答已采纳
发布于 2014-02-03 09:01:56
试一试
function toggle(id) {
$('#rechnung0,#rechnung1,#rechnung2').css('float', 'right').css('display', function () {
return this.id == id ? 'block' : 'none'
})
}如果您能够为代码提供更多的上下文，我们可能会为您提供更多的帮助。
Stack Overflow用户
发布于 2014-02-03 09:00:25
尝尝这个
$(function () {
$('input:radio').click(function () {
$('input:radio').not(this).prop('checked', false).next('img').hide();
$(this).next('img').show();
});
});http://jsfiddle.net/349Rx/1/
这假设您的图像实际上是一个<img>，位于DOM中靠近单选按钮的位置。而且，它也不需要在无线电按钮上设置onclick。
Stack Overflow用户
发布于 2014-02-03 09:08:09
为所有单选按钮提供一个类似的类和一个数据属性
<input type='radio' class='radio' data-id='1' />
<input type='radio' class='radio' data-id='2' />
<input type='radio' class='radio' data-id='3' />
<img id="1" style="display:none; " />
<img id="2" style="display:none; " />
<img id="3" style="display:none; " />
$(document).ready(function()){
$(".radio").click(function(){
var id = $(this).data('id');
$("#"+id).show();
});
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/21523079
复制相关文章
相似问题
腾讯云开发者
