在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">