Javascript 如果jQuery的数组中有可用的方法，则执行函数

我正试图找到一种更好的方法来编写jQuery，但我自己无法解决

$('.ajaxButton').click(function(event) {

    event.preventDefault();

    var button = $(this).data('button');
    var action = $(this).data('buttonaction');
    var target = $(this).data('buttontarget');

    // The following code needs a rewrite
    if (action === 'fadeIn') {
        $(target).fadeIn();
    } else if (action === 'slideDown') {
        $(target).slideDown();      
    } else if (action === 'fadeToggle') {
        $(target).fadeToggle();     
    } else if (action === 'slideToggle') {
        $(target).slideToggle();        
    } else {
        console.log('Action not found for ' + button + ' button.');
    }


});

为了避免反复编写相同的代码，我为我在web应用程序中创建的按钮编写了上述JS。上述代码适用于以下锚点：

<a href="#" 
    class="button ajaxButton" 
    data-button="showForm"
    data-buttonaction="slideToggle"
    data-buttontarget=".showForm" >...</a>

我希望避免使用

if:else

语句。我的第一直觉是拥有某种包含所有可能动作的数组。从那里，我执行一个简单的

，如果操作在数组do…

中

var actionArray = new Array('fadeIn', 'slideDown'...);

if ($.inArray(action, actionArray)) {
    $(target).action();
}

但我不知道如何创建函数。我可以基于数组值调用函数吗？或者我可以将字符串转换为函数吗？我想我能找到的最接近的方法就是使用这个函数

---

有更好的方法吗？或者我必须使用if-else语句吗？

您可以使用括号符号（

obj['prop']

）而不是点符号（

obj.prop

）将对象中的属性作为目标。所以你可以这样做：

const validActions = ['fadeIn', 'slideDown'];

function doSomethingWithTarget(target, something) {
  if (validActions.includes(something)) {
    target[something]();
  }
}

doSomethingWithTarget($('#element'), 'slideDown'); // $('#element').slideDown();

更多信息： ，

以下是我的尝试：

$('.ajaxButton').click(event => {
  event.preventDefault();

  let $this = $(this),
    button = $this.data('button'),
    action = $this.data('buttonaction'),
    $target = $($this.data('buttontarget'));

  try {
    $target[action]();
  } catch (error) {
    console.log('Action not found for ' + button + ' button.');
  }
});

---

target.fadeIn

也可以写入

target[“fadeIn”]

。如果它是一个函数，那么可以用同样的方法调用它：

target.fadeIn（）

或

target[“fadeIn”]（）

。然后参数可以是动态的（变量）：

target[action]（）

您可以检查目标函数的exist，如果是，则执行它

$（'.ajaxButton'）。单击（函数（事件）{
event.preventDefault（）；
var button=$（this.data（'button'）；
var action=$（this.data（'buttonaction'）；
var target=$（this.data（'buttontarget'）；
//检查功能是否为目标对象激活
if（typeof$（target）[action]=“function'）{
//如果是这样，执行它。
美元（目标）[行动]（）；
}否则{
console.log（'function:'+action+'对于target:'+target未找到）；
}
});

测试切换div
if（target[action]）target[action]（）的可能重复项可以工作。但不知道如何将其转换为jquery。关键是，只要操作的拼写与调用的方法名相同，就可以使用操作字符串以括号表示法而不是点表示法调用函数。永远不要使用
eval（）
，除非您能准确解释使用它的原因。您还可以使用switch（）语句，其使用方式与内部减速器相同。PS：如果你用一个实际的按钮而不是超链接，你不必非得
preventDefault（）
@Shilly，它只是
$（target）[action]（）
嗨，谢谢你这对我很有效。但是，我在jQueryAPI网站上找不到任何关于括号符号的信息，也找不到为什么我不需要
来调用函数。我很想了解更多关于这方面的知识。@UzairHayat它不一定与jQuery有任何关系，而是与JS对象一般有关。jQuery对象只是一个JS对象，其中定义了一系列方法/属性（如
fadeIn
，
slideDown
等）。我已经添加了MDN页面的链接，并在答案中添加了额外的信息。
$('.ajaxButton').click(event => {
  event.preventDefault();

  let $this = $(this),
    button = $this.data('button'),
    action = $this.data('buttonaction'),
    $target = $($this.data('buttontarget'));

  try {
    $target[action]();
  } catch (error) {
    console.log('Action not found for ' + button + ' button.');
  }
});