在HTML中添加自定義屬性

Question

我想制作一個圖像，單擊該圖像可顯示有關該圖像的一些其他信息，例如標題。 下面是我嘗試過的一些代碼，它似乎可以工作。 但是，這只是在我自己決定嘗試添加自定義屬性“ title”之后，而不是在某個地方讀到這樣做的方式之后。 因此，即使這對我有用，我仍想知道這是否是一種好的做法，或者是否有推薦的方法來做到這一點？

HTML：

<img id="test_image" src="images/image1.jpg" title="Test Image">

jQuery的：

$("#test_image").click(function()
{
    alert(this.title);
});

Answer 1

title不是自定義屬性，而是標准屬性。 將鼠標懸停在元素上時，它會顯示在工具提示中。

您不應創建自定義屬性。 HTML5具有用於用戶定義屬性data的標准機制。 所有以data-開頭的屬性都保留供程序員使用。 jQuery有一種用於訪問它們的方法.data() 。

 $("#test_image").click(function() { alert($(this).data('title')); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <img id="test_image" src="images/image1.jpg" data-title="Test Image">