如果选择单选按钮显示Div – 8个单选按钮/ 8个分区 – 这可以简化吗？
基本上，我想要8个单选按钮。 如果选择了一个单选按钮，则下面显示一个div。 如果选择另一个按钮，则显示另一个div。 一次只显示一个div，如果没有选择按钮（最初），则不显示div。
这是我的HTML，这是相当标准的，我不是想根据我的需要改进它。
sim-micro sim-mini sim-maxi sim-mega phone-smart-micro phone-smart-mini phone-smart phone-smart-maxi 然而，这是我的剧本，它似乎相当忙乱，我想知道我继续前进是否有办法做到这一点更简单？
$(document).ready(function(){ $('.sim-micro-desktop').hide(); $('.sim-mini-desktop').hide(); $('.sim-maxi-desktop').hide(); $('.sim-mega-desktop').hide(); $('.phone-smart-micro-desktop').hide(); $('.phone-smart-mini-desktop').hide(); $('.phone-smart-desktop').hide(); $('.phone-smart-maxi-desktop').hide(); $('form#group').click(function(){ if($('.sim-micro-btn').is(":checked")){ $('.sim-micro-desktop').show(); } else { $('.sim-micro-desktop').hide(); } if($('.sim-mini-btn').is(":checked")){ $('.sim-mini-desktop').show(); } else { $('.sim-mini-desktop').hide(); } if($('.sim-maxi-btn').is(":checked")){ $('.sim-maxi-desktop').show(); } else { $('.sim-maxi-desktop').hide(); } if($('.sim-mega-btn').is(":checked")){ $('.sim-mega-desktop').show(); } else { $('.sim-mega-desktop').hide(); } if($('.phone-smart-micro-btn').is(":checked")){ $('.phone-smart-micro-desktop').show(); } else { $('.phone-smart-micro-desktop').hide(); } if($('.phone-smart-mini-btn').is(":checked")){ $('.phone-smart-mini-desktop').show(); } else { $('.phone-smart-mini-desktop').hide(); } if($('.phone-smart-btn').is(":checked")){ $('.phone-smart-desktop').show(); } else { $('.phone-smart-desktop').hide(); } if($('.phone-smart-maxi-btn').is(":checked")){ $('.phone-smart-maxi-desktop').show(); } else { $('.phone-smart-maxi-desktop').hide(); } }); });
首先在radio按钮和显示内容的div元素上放置共享类。 在我的例子中，我分别使用了trigger和content 。 然后将data属性添加到收音机，以识别单击时应显示哪个div。
缩短的例子：
sim-micro
那你只需要一个点击处理程序，如下所示：
$(document).ready(function(){ $('.trigger').click(function() { $('.content').hide(); $('.' + $(this).data('rel')).show(); }); });
然后你也可以使用CSS来隐藏div元素而不用jQuery – 无论如何都应该在CSS中完成样式，因为这是一个更好的关注点分离。
.content { display: none; }
示例小提琴
您可以使用CSS隐藏div元素：
.billpay-internet-add-ons div { display: none; }
然后，您可以使用target的className来确定要显示的div ，隐藏所有sibling元素：
$('form#group').click(function(e) { var className = e.target.className.replace('btn', 'desktop'); $('.' + className).show().siblings().hide(); });
这是一个小提琴
使用html5数据属性）（即data-mappingclass）指向你需要显示的相应div。 将相同的类添加到所有单选按钮（即radioClass）。
HTML
... //same for others
JS
$('.radioClass').click(function() { $('.billpay-internet-add-ons div').hide(); if(this.checked){ $('.' + $(this).data('mappingclass').show(); } });
您可以使用选择器来减少此处的代码行数。
$('.sim-micro-desktop').hide(); $('.sim-mini-desktop').hide(); $('.sim-maxi-desktop').hide(); $('.sim-mega-desktop').hide(); $('.phone-smart-micro-desktop').hide(); $('.phone-smart-mini-desktop').hide(); $('.phone-smart-desktop').hide(); $('.phone-smart-maxi-desktop').hide();
可缩短为：
$('.billpay-internet-add-ons div').hide();
这使用父元素对要隐藏的元素进行分组，而不是为每个元素重复请求。
同样，您可以使用命名约定将项目映射到要显示和隐藏的元素 – 这是完整的工作示例：
$(document).ready(function(){ $('.billpay-internet-add-ons div').hide(); $('form#group').click(function(){ $('#group input').each(function() { var item = $(this); var isChecked = item.is(':checked'); var name = item.attr('class').replace("-btn", "-desktop"); if (isChecked) { $('.' + name).show(); } else { $('.' + name).hide(); } }); }); });
此示例完全基于您的HTML而不做任何更改。 看到它在这里工作 。
如果您不需要转换名称，可以进一步简化此操作。 您可以使用数据属性而不是更改类名来执行此操作。
var $billpay= $('.billpay-internet-add-ons'); $billpay.find("div").hide(); $("#group input:radio").click(function(){ $billpay.find("div").hide(); $billpay.find("div:eq("+$(this).parent().index()+")").show(); });
我简化了四个你。 基本上你看看点击的无线电有哪个索引，然后显示一个具有相同索引的div。 因此div的位置必须与无线电相匹配。
您的HTML与以前一样。
你的CSS：
.billpay-internet-add-ons > div { display:none; }
你所有的Javascript：
$(document).ready(function(){ $('form#group').click(function(e) { $('.billpay-internet-add-ons > div').hide(); $('form#group input[type="radio"]').each(function(index) { if($(this).is(':checked')) { $('.billpay-internet-add-ons > div:eq(' + index + ')').show(); } }); }); });
jsFiddle演示： http ： //jsfiddle.net/cfSXY/
您可以首先使用CSS默认隐藏所有内容（除了一个表单），这样可以解决这个问题：
$('.sim-micro-desktop').hide(); $('.sim-mini-desktop').hide(); $('.sim-maxi-desktop').hide(); $('.sim-mega-desktop').hide(); $('.phone-smart-micro-desktop').hide(); $('.phone-smart-mini-desktop').hide(); $('.phone-smart-desktop').hide(); $('.phone-smart-maxi-desktop').hide();
这对没有javascript的用户有负面影响，如果你担心 – 他们将永远无法看到其他forms。
接下来，只能检查一个无线电，所以只需找出它正在使用的无线电：
$('input[name=group1]:checked);
但是你为什么要这样做，所以你有无线电有点击处理程序更像：
$('#group input[type="radio"').click(function(){ //code to show/hide form });
现在您可以选择如何将单选按钮链接到不同的表单，以便使用数据属性，因此您可以像这样定义无线电：
您可以这样访问：
$('input[name=group1]:checked).data("form");
现在您需要做的就是隐藏已经显示的div，但这可以通过类似使用data属性或使用:visible选择器来实现。