使用选择器时传输函数参数的好方法是什么？

我想我的HTML从我的js隔离通过更换以下使用选择器时传输函数参数的好方法是什么？

<div id = "foo" onclick="bar(variable)"></div>

与

<div id = "foo"></div> 
$(document).ready(function() { 
    $("#foo").click(function(event) { 
     bar(???); 
    }); 
});

现在，这将是转移参数bar()的好方法。

我应该合并它与一些元素ID？或者我应该声明它是一个JS变量使用PHP时，我加载页面？或者，还有更好的方法？

来源

2011-10-12 Bojack

29是什么意思？ – jondavidjohn

'bar（29）有什么问题;' – Joe

@IAbstractDownvoteFactory它是突兀的... – jondavidjohn

你可以把项目本身的属性和检索从点击处理程序。

<div id="foo" data-item="29"></div> 

$(document).ready(function() { 
    $("#foo").click(function(event) { 
     bar($(this).data("item")); 
    }); 
});

当然，如果你只拥有其中之一，你并不需要抽象的数据数量，你可以做这样的：

$(document).ready(function() { 
    $("#foo").click(function(event) { 
     bar(29); 
    }); 
});

不过，我想大家都假设你想让29来自标记，所以你可以在许多元素上使用常见的点击处理器。如果是这种情况，那么第一种方法就可以实现这一点。

来源

2011-10-12 16:14:51 jfriend00

是的，它是html 5，但人们早在html5规范之前就已经做了这种方法。它不是有效的HTML，但它的工作原理。记住html5的规范是基于人们如何违反规则以及人们经常做什么的。如果你希望它是有效的html，那么将它添加到class属性中。这是最常用的方法。 – Yamiko

你认为这不起作用的浏览器是什么？在自定义属性前面使用“data-”的惯例是为HTML5提供的一种惯例，以防止自定义属性和标准属性之间的冲突，但它在旧版浏览器中似乎对我来说很好。 – jfriend00

您可以在参数存储作为数据属性：

<div id="foo" data-bar="29"></div>

$(document).ready(function() { 
    $("#foo").click(function(event) { 
     bar($(this).data('bar')); 
    }); 
});

来源

2011-10-12 16:14:16 josh3736

***注意***这是一个html5规范，需要现代浏览器... – jondavidjohn

它是一个html5规范，但现代浏览器不是必需的... – Rafay

简单 - 如果你要使用PHP变量：

<div id="foo"></div> 
$(document).ready(function() { 
    $("#foo").click(function(event) { 
     bar(<?= $variable ?>); 
    }); 
});

来源

2011-10-12 16:16:35 jbyrd

我建议的数据属性的其他建议。这是不正确的HTML，但它适用于今天使用的所有浏览器...
喜欢写入有效代码（不是我在这种情况下）的人喜欢将数据添加到类属性或将它只设置在JavaScript 。

来源

2011-10-12 16:23:36 Yamiko

大多数人认为他们需要参数来定位元素，该元素是被点击的元素的子元素或具有已知路径的元素。对于这种事情，最好的做法是根本不使用参数，而是从被点击的节点遍历DOM以找到适当的元素。

$("#foo").click(function(event) { 
    var doSomethingTo = $(this).find('div')[0]; 
    doSomethingTo.hide(); 
});

来源

2011-10-12 17:40:09 James

使用选择器时传输函数参数的好方法是什么？

回答

相关问题