$(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
,但出现错误。
有帮助吗?
答案 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>