理想解决方案

Question

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

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

我需要自定义属性。我制作了名为vacation的自定义html属性。我通过事件访问它，类似这样：

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

这有效，但我感兴趣的是这是最佳做法吗？如果可能的话，我想避免使用HTML5数据属性。

Answer 1

不使用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");
});

Answer 2

它被认为是糟糕的标记。尽量避免它。如有必要，使用隐藏字段并分配给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

Answer 3

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

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

您可以使用Regex获取值：

 $('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);
 });

<强> WORKING EXAMPLE

选择自定义html属性

3 个答案:

理想解决方案