告诉jQuery执行value属性中设置的操作

Question

作为一个例子,考虑这个代码:

<input id="1" class="ok" type="radio" name="myradio" value="hide">
<input id="2" class="ok" type="radio" name="myradio" value="show">
<input id="3" class="ok" type="radio" name="myradio" value="fadeOut">
<input id="4" class="ok" type="radio" name="myradio" value="fadeIn">

我想要以下代码的相同输出,但没有if语句.

if($('#1').is(':checked')) {$("#myDiv").hide()}
if($('#2').is(':checked')) {$("#myDiv").show()}
if($('#3').is(':checked')) {$("#myDiv").fadeOut()}
if($('#4').is(':checked')) {$("#myDiv").fadeIn()}

换句话说,我想告诉jQuery执行value属性中的动作集,只要它是一个有效的jQuery动作,而不使用if语句.

PS:myDiv可能是任何东西,例如:

<div id="myDiv">bla bla bla</div>

Answer 1

获取输入的值并使用括号语法[]来访问该函数.然后他们()打电话给这个功能.并且还进行了验证

$('input[type=radio]').on('click', function(){
  var action = this.value;
  
  if($('#myDiv')[action]){
    $('#myDiv')[action]();  
  }       
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="1" class="ok" type="radio" name="myradio" value="hide">
<input id="2" class="ok" type="radio" name="myradio" value="show">
<input id="3" class="ok" type="radio" name="myradio" value="fadeOut">
<input id="4" class="ok" type="radio" name="myradio" value="fadeIn">

<div id="myDiv">
  TEST  
</div>