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

时间:2019-02-06 20:58:08

标签: javascript jquery

$(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,但出现错误。

有帮助吗?

2 个答案:

答案 0 :(得分: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>

答案 1 :(得分:1)

使用字符串操作,可以从函数名称中删除参数,然后使用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>