Javascript 使用jQuery为单选选项隐藏和显示div会变得更简单吗？

我有一个无线电输入，根据选择，显示的结果会发生变化。我使用了css

display:none

隐藏与结果无关的

div

并删除css

显示：无当
div
与结果相对应时

以下是代码片段：


$（文档）.ready（函数（）{
$（“输入”）.change（函数（）{
var IVAccess=$（'input[name=“IVAccess”]：checked'）.val（）；
if（IVAccess==0）{
$（'#IVAccessBp'）.removeClass（'displayNone'）；
}否则{
$（'#IVAccessBp'）.addClass（'displayNone'）；
}
if（IVAccess==1）{
$（'IVAccessNBp'）.removeClass（'displayNone'）；
}否则{
$（'IVAccessNBp'）.addClass（'displayNone'）；
}
});
美元（“#apgarA2”）。触发（“更改”）；
});
.displayne{
显示：无；
}

选择1
选择2
选择1
选择2
由于只能有两个值
0
和
1
，如果没有，只需使用一个
：

var IVAccess = $('input[name="IVAccess"]:checked').val();
if (IVAccess == 0) {
    $('#IVAccessBp').removeClass('displayNone');
    $('#IVAccessNBp').addClass('displayNone');
} else {
    $('#IVAccessBp').addClass('displayNone');
    $('#IVAccessNBp').removeClass('displayNone');
}

此外，您可以使用三元运算符来决定两个元素中的哪一个获得
displayNone
，哪一个不获得，如下所示：

var IVAccess = $('input[name="IVAccess"]:checked').val();
$('#IVAccess' + (IVAccess == 0? "Bp": "NBp")).removeClass('displayNone');
$('#IVAccess' + (IVAccess == 1? "Bp": "NBp")).addClass('displayNone');

var arrayOfIDs = ['Bp', 'NBp', 'SomeOtherBp', 'YetAnotherBp'];

$("input").change(function() {
    var IVAccess = $('input[name="IVAccess"]:checked').val();
    $('.IVAccessCommonClass').addClass('displayNone');                  // hide all '#IVAccess??' elements using the common class
    $('#IVAccess' + arrayOfIDs[IVAccess]).removeClass('displayNone');   // show only the one corresponding to the current value of the input using that value as an index of the array
});

编辑：

如果有更多的元素，那么最好为
“#IVAccess？？？”
元素使用一个公共类，这样只需使用一行代码就可以隐藏所有元素。要显示相应的元素，可以使用ID数组并显示其索引为
IVAccess
值的ID，如下所示：

var IVAccess = $('input[name="IVAccess"]:checked').val();
$('#IVAccess' + (IVAccess == 0? "Bp": "NBp")).removeClass('displayNone');
$('#IVAccess' + (IVAccess == 1? "Bp": "NBp")).addClass('displayNone');

var arrayOfIDs = ['Bp', 'NBp', 'SomeOtherBp', 'YetAnotherBp'];

$("input").change(function() {
    var IVAccess = $('input[name="IVAccess"]:checked').val();
    $('.IVAccessCommonClass').addClass('displayNone');                  // hide all '#IVAccess??' elements using the common class
    $('#IVAccess' + arrayOfIDs[IVAccess]).removeClass('displayNone');   // show only the one corresponding to the current value of the input using that value as an index of the array
});

或者去掉数组并将输入值更改为ID本身：

$("input").change(function() {
    var IVAccess = $('input[name="IVAccess"]:checked').val();           // this will be either 'Bp', 'NBp', ...
    $('.IVAccessCommonClass').addClass('displayNone');
    $('#IVAccess' + IVAccess).removeClass('displayNone');
});

示例：


$（文档）.ready（函数（）{
$（“输入”）.change（函数（）{
var IVAccess=$（'input[name=“IVAccess”]：checked'）.val（）；
$（'.IVAccessCommonClass'）.addClass（'displayNone'）；
$（'#IVAccess'+IVAccess）.removeClass（'displayNone'）；
});
});
.displayne{
显示：无；
}

方案B
选项SomeB
选择其他人
选项NB
方案B
选项SomeB
选择其他人
选项NB
查看有关每个步骤的操作说明


我修改了标记以包含一个
数据值
，以对应于无线电值
修改为在可显示区域中包含类以供选择


$（文档）.ready（函数（）{
//选择可显示区域并将其缓存
变量$displays=$（'.IVAccess'）；
$（“输入”）。更改（功能（e）{
//把它们都藏起来
$displays.addClass（'displayNone'）；
//找到与数据值匹配的元素，并显示它
$displays.filter（函数（）{
返回$（this.data（'value'）==e.target.value；
}).removeClass（'displayNone'）；
});
美元（“#apgarA2”）。触发（“更改”）；
});
.displayne{
显示：无；
}

选择1
选择2
选择3
选择4
选择1
选择2
选择3
选择4
您可以尝试以下方法：

$('#IVAccessBp').toggleClass('displayNone', IVAccess == 0 || IVAccess == 1);

或

如果值不是0和1，则可以向数组值添加任何值。
这里是另一个与上面一次稍有不同的选项


$（文档）.ready（函数（）{
$（“输入”）.change（函数（）{
var IVAccess=Number（$（'input[name=“IVAccess”]：checked'）.val（）；
IVAccess？$（'IVAccessBp'）.hide（）&&$（'IVAccessNBp'）.show（）：$（'IVAccessBp'）.show（）&&$（'IVAccessNBp'）.hide（）
});
美元（“#apgarA2”）。触发（“更改”）；
});

选择1
选择2
选择1
选择2
Wow！谢谢你的回复。但是我很抱歉这个模糊的问题。如果有两个以上的选项怎么办？@Ashonko如果有更多选项，那么您可以为
“#IVAccess？？？”
元素使用一个公共类，将它们全部隐藏在一行代码中，然后使用名称数组仅显示相应的元素，其中使用
IVAccess
值访问数组。你想让我举个例子吗？那会很有帮助的@ibrahim@Ashonko添加了两种实现方法。是的，这是可能的，您可以使用toggleClass（），而不是使用remove和addClass。非常感谢您的建议。这是解决这个问题的一个非常有趣的方法。