-3

我有这个工作，但我想知道这是正常的做法。

<button vacation="2" type="button" class="delete" id="vc-2"><i class="icon-static"></i></button>

我需要自定义属性。我制作了名为假期的自定义 html 属性。我通过事件访问它，如下所示：

var vacation = parseInt(e.currentTarget.attributes[0].value); //Zero, since this is the first attribute.

这行得通，但我很感兴趣这是最佳实践吗？如果可能，我想避免使用 HTML5 数据属性。

4

3 回答 3

2

在不使用 HTML5 data-* 属性的情况下，您可以执行以下操作...

标记

<input type="hidden" value="2" id="vc-2-vacation" />
<button type="button" class="delete" id="vc-2"><i class="icon-static"></i></button>

jQuery

$(".delete").click(function() {
 var vacation = ($(this).id + "-vacation").val();
}

更新：起初我给出了在 HTML5 中使用 data-* 属性的答案。在因提供正确答案而被否决但不完全是 OP 的要求后，我将答案更改为上述不太理想的方法，虽然可行，但我永远不会使用自己...

下面，您将找到“最佳实践”答案，即使用 HTML5 的 data-* 属性。

理想的解决方案

标记

<button data-vacation="2" class="delete" id="vc-2"><i class="icon-static"></i></button>

jQuery

$(".delete").on("click", function() { 
  var vacation = $(this).data("vacation");
});
于 2013-06-25T14:23:21.483 回答
0

如果您的目标是避免使用 HTML5，那么最佳做法是使用一个类：

<button type="button" class="delete vacation-2" id="vc-2"><i class="icon-static"></i>  </button>

您可以使用正则表达式获取值：

 $('button').on('click', function(){
       var classList = $(this).attr('class');
       var patt = /vacation-([0-9]{1,})/;
       var vacation = classList.replace(patt, function(a,b){
                          return b;
                      });
       $(this).html(vacation);
 });

工作示例

于 2013-06-25T14:44:08.567 回答
0

它被认为是错误的标记。尽量避免它。如有必要，使用隐藏字段并分配给 value 属性。你为什么反对 HTML5 数据属性？这就是它的目的。

编辑 要处理事件，您需要使用点击处理程序。

您的标记将如下所示：

<button type="button" class="delete" id="vc-2" data-vacation="2"> </button>

你的 js/jquery 看起来像：

var button = $('#vc-2');
button.click(function(){ alert(button.data('vacation')); }); //click handler
于 2013-06-25T14:22:37.167 回答