不显眼的 JavaScript - 安全属性？

Question

我正在努力将 JavaScript 代码从我的 HTML 中分离出来。我目前的代码如下所示：

<div onclick="return do_something_with('100566');" class="clickable">Click Me!</div>

我想将 onclick 交换为仅包含我传递给方法的参数的属性。

我正在使用 jQuery 和以下类型的代码：

var $j = jQuery;
$j(function(){
    $j('.clickable').live('click',function(){
        param = $j(this).attr('attribute_name');
        do_something(param);
    });
});

我可以为“attribute_name”使用什么属性来安全地传达此参数值？我知道我可以使用 id，但我已经在 DOM 的不同位置定义了具有相同 id 的元素。

有什么建议吗？

Answer 1

我通常会添加一个有意义的前缀，例如Client-100566，然后使用以下代码访问它：

var param = $(this).attr("id").split("-")[1];

编辑：删除了对无效全数字 id 令牌的建议。

Answer 2

我经常发现自己要么将 id 用于独特的事物，要么将数据隐藏在 <span> 中。

Answer 3

您不能在div 内的a 上使用rel 标签吗？它允许将 1 个参数或 n 个参数传递给 doSomething。

<div>
  <a class="clickable" rel="param1 param2 param3">Click Me!</a>
</div>

所以现在当 param 发送到 doSomething 时，它是一个空格分隔的列表，param.indexOf("param1") 可用于检查已发送的参数？

Answer 4

为什么不制作这些a 标签？有几个网站使用锚点（#someThing）部分或使用rel 属性。

Answer 5

您可以将 class 或 title 属性用作以空格分隔的参数列表。标题的缺点是当您的元素悬停时它会显示为弹出窗口：

<div class="clickable param1 param2 param3">

或

<div class="clickable" title="param1 param2 param3">

这里是other attributes 的列表，您也可以考虑。

Answer 6

你可以组成任何属性名。

<div onclick="foo();" silkyvalue="12938">hello</div>

不过，我通常会使用一些命名格式，例如“my_somethingID”。