Question

$(document).on('click', '.title', function(){
    var fn = $(this).attr('data-fn');
    window[fn]();
});

function goUp() {
    console.log('up');
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class='title' data-fn='goUp'>lorem</div>

以上方法有效，但我需要在goUp函数中使用一些参数。例如：

<div class='title' data-fn="goUp('gold')">lorem</div>  

function goUp(item) {
    console.log(item);
}

期望在控制台中使用gold，但出现错误。

有帮助吗？

Answer 1

没有任何绑定您的代码。唯一的参考是data-fn中的字符串，正如我所说的，它只是一个字符串！

您使用JQuery获取该字符串，并使用该键在window对象中查找任何属性。如果找到它，则执行该功能。

在以下方面没有什么不同

const foo = "bar";
window.bar = "hello world";
console.log(window[foo]); // hello world

而且您了解，您的html并不知道data-fn是否为函数，是否具有参数。

但是，您可以添加其他属性并将其用作参数：

$(document).on('click', '.title', function() {
  var fn = $(this).attr('data-fn');
  var arg1 = $(this).attr('data-arg1');
  window[fn](arg1);
});

function goUp(arg){
  console.log('up', arg);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class='title' data-fn='goUp' data-arg1="gold">lorem</div>

Answer 2

使用字符串操作，可以从函数名称中删除参数，然后使用apply调用带有这些参数的函数。这将要求函数名称存在（与其他实现一样），并且还要求参数为字符串（与其他实现一样）。

使用indexOf查找括号的位置，并使用子字符串形成所需的值。

$(document).on('click', '.title', function(){
    var val = $(this).attr('data-fn');
    var openParen = val.indexOf('(');
    var fn = val.substring(0,openParen);
    var args = val.substring(openParen+1,val.indexOf(')')).split(',');
    window[fn].apply({},args);
});

function goUp(item){
    console.log(item);
}
function multi(a,b){
    console.log(a);
    console.log(b);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class='title' data-fn="goUp('gold')">lorem</div>  
<div class='title' data-fn="multi('red','blue')">ipsum</div>

如何在窗口函数上传递参数

2 个答案: