Question

我试图通过替换以下

来将我的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变量？或者有更好的方法吗？

Answer 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来自标记，因此您可以在许多元素上使用常见的单击处理程序。如果是这种情况，那么第一种方法就能实现这一点。

Answer 2

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

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

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

Answer 3

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

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

Answer 4

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

Answer 5

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

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

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

5 个答案: