在使用选择器时传递函数参数的好方法是什么? - What is a good way to transfer function arguments when using selectors?

What is a good way to transfer function arguments when using selectors?

我试图通过替换以下

将我的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变量?还是有更好的办法?

您可以为项目本身添加一个属性，并从click处理程序中检索该属性。

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

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

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

我建议像其他人建议的那样使用data属性。这不是有效的html，但它在今天使用的所有浏览器中都有效…
喜欢编写有效代码的人(在这种情况下不是我)喜欢将数据添加到class属性中，或者只是在javascript中设置它。

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

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

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

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

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