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

【问题标题】：What is a good way to transfer function arguments when using selectors?使用选择器时传递函数参数的好方法是什么？
【发布时间】：2011-10-12 16:10:24
【问题描述】：

我正在尝试通过替换以下内容来将我的 HTML 与我的 js 隔离

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

与

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

现在，为bar() 传输参数的好方法是什么。

我应该将它与一些元素 id 合并吗？或者我应该在加载页面时使用 PHP 将其声明为 JS 变量？还是有更好的办法？

【问题讨论】：

29有什么意义？
@IAbstractDownvoteFactory 太突兀了...
EDITS - 考虑任何变量来代替 29

标签： php javascript jquery html variables

【解决方案1】：

您可以在项目本身上放置一个属性，然后从点击处理程序中检索该属性。

<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 来自标记，因此您可以在许多元素上使用通用的点击处理程序。如果是这样，那么第一种方法就可以完成。

【讨论】：

是的，它是 html 5，但早在 html5 规范出现之前，人们就已经在使用这种方法了。它不是有效的 html，但它可以工作。请记住，html5 的规范是基于人们如何违反规则以及人们经常做的事情。如果您希望它是有效的 html，则将其添加到类属性中。这是最常用的方法。
您认为这在哪些浏览器中不起作用？在自定义属性前使用“data-”的约定是为 HTML5 提出的一种约定，以防止自定义属性和标准属性之间发生冲突，但它似乎在旧浏览器中对我来说很好。

【解决方案2】：

简单 - 如果您使用 php 获取变量：

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

【讨论】：

【解决方案3】：

我会像其他人建议的那样建议数据属性。它不是有效的 html，但它适用于当今使用的所有浏览器...
喜欢编写有效代码的人（在这种情况下不是我）喜欢将数据添加到类属性中，或者只是在 javascript 中设置它。

【讨论】：

【解决方案4】：

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

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

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

【讨论】：

【解决方案5】：

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

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

【讨论】：