javascript - 是否可以使用 jQuery 隐藏和显示单选选项的 div 变得更简单？

Question

我有一个 radio 输入，根据选择，显示的结果会发生变化。我已经使用 css display: none; 隐藏与结果无关的 div 并删除 css display: none; 当 div对应结果。

代码片段如下:

$(document).ready(function() {
    $("input").change(function() {

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

    });
    $("#apgarA2").trigger("change");
});

.displayNone {
	display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" class="apgarIn" name="IVAccess" id="IVAccessB" value="0"/>
<label for="IVAccessB" class="apgarL">Option 1</label>
<input type="radio" class="apgarIn" name="IVAccess" id="IVAccessNB" value="1" checked="checked" />
<label for="IVAccessNB" class="apgarL">Option 2</label>
<div id="IVAccessBp" class="displayNone">
   Option 1      
</div>
<div id="IVAccessNBp" class="displayNone">
   Option 2      
</div>

我的问题不是为 if (IVAccess == 0) 编写一次逻辑，然后为 0 编写逻辑，然后再为 if (IVAccess == 1) 对于值 1，我可以为这两个值编写一个更简单的公式吗？ (它不一定只有 2 个选项，某个地方可能有 2 个以上的选项)。我的意思是这部分可以用更聪明的方式编写吗？

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

提前感谢您的建议。

Answer 1

因为只能有两个值 0 和 1，所以只使用一个 if-else:

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');

编辑:

如果有更多元素，那么最好为 "#IVAccess??" 元素使用一个公共(public)类，这样只需使用一行代码即可隐藏所有元素。要显示相应的元素，您可以使用 ID 数组并显示其索引为 IVAccess 值的元素，如下所示:

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');
});

示例:

$(document).ready(function() {
  $("input").change(function() {
    var IVAccess = $('input[name="IVAccess"]:checked').val();
    $('.IVAccessCommonClass').addClass('displayNone');
    $('#IVAccess' + IVAccess).removeClass('displayNone');
  });
});

.displayNone {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label><input type="radio" name="IVAccess" value="B" /> Option B</label>
<label><input type="radio" name="IVAccess" value="SomeB" /> Option SomeB</label>
<label><input type="radio" name="IVAccess" value="SomeOtherB" /> Option SomeOtherB</label>
<label><input type="radio" name="IVAccess" value="NB" checked="checked" />Option NB</label>
<div id="IVAccessB" class="displayNone IVAccessCommonClass">
  Option B
</div>
<div id="IVAccessSomeB" class="displayNone IVAccessCommonClass">
  Option SomeB
</div>
<div id="IVAccessSomeOtherB" class="displayNone IVAccessCommonClass">
  Option SomeOtherB
</div>
<div id="IVAccessNB" class="displayNone IVAccessCommonClass">
  Option NB
</div>