0

我有多组是/否单选按钮，它们根据单选值隐藏或显示 div。如何仅选择最接近的 div 到已更改的单选按钮集？

http://jsfiddle.net/infatti/esLMh/

这可行，但会更改页面上的所有 div，而不仅仅是最接近的。

$('.hide-show input').change(function() {
  $('.hide-show-yes').toggle(this.value == 'yes');
  $('.hide-show-no').toggle(this.value == 'no');
});
$('.hide-show input:checked').change(); //trigger correct state onload

当页面上有多个集合时，如何仅影响最接近收音机的 div？

$('.hide-show input').change(function() {
  $(this).next('.hide-show-yes').toggle(this.value == 'yes').next('hide-show-no').toggle(this.value == 'no');
});
$('.hide-show input:checked').change(); //trigger correct state onload
4

3 回答 3

2

您需要访问单选按钮的父div的下一个元素，您可以这样做

现场演示

$('.hide-show input').change(function() {
  $(this).closest('div').next('.hide-show-yes').toggle(this.value == 'yes');
  $(this).closest('div').next('.hide-show-no').toggle(this.value == 'no');
});
$('.hide-show input:checked').change(); //trigger correct state onload
于 2013-04-19T17:55:26.357 回答
0 
$('.hide-show input').change(function() {    
  $(this).parent().next().toggle(this.value == 'yes');
  $(this).parent().next().next().toggle(this.value == 'no');
});
$('.hide-show input:checked').change(); //trigger correct state onload

JSFIDDLE

于 2013-04-19T18:02:57.113 回答
0

给你的输入字段一个id，你可以控制id，这样你就可以做类似的事情

$('#radioButtonOne').change(function() {

和

$('#radioButtonTwo').change(function() {

这样您就可以始终确保知道正在更改的内容，并根据更改执行不同的功能。

我还建议每个状态只有一个 div，因此您可以更改 div 的文本，而不是隐藏和显示多个 div。

我还建议使用 on jquery 函数，这样您就可以更改 DOM，但仍然能够侦听您可能创建的 NEW 元素。

 $("#radioButtonOne").on("change", function(event){
于 2013-04-19T17:51:54.393 回答