選擇自定義html屬性

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數據屬性？這就是它的目的。

編輯 要處理事件，您將需要使用點擊處理程序。

您的標記將是這個樣子：

<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 2

不使用HTML5數據 - *屬性，你可以做到以下幾點.. 。

標記

<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數據 - *屬性的答案。經過downvoted提供正確的答案，但不完全是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 3

如果你的目標是避免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); 
}); 

WORKING EXAMPLE