javascript - 为什么我不能使用自定义选定属性？

Question

我正在尝试在我的 HTML 中使用自定义“selected”属性，而 jQuery 总是返回该属性的错误值。我知道，“selected”在 options 标签中使用，但为什么我不能在其他标签中使用它？请看示例:http://jsfiddle.net/SE7FB/8/

<div class="category" selected="false">First</div>
<div class="category" selected="false">Second</div>
<div id="tester" style="width: 100px; height: 100px; float: right; background-color: black;"></div>

JavaScript:

$(".category").click(function () {
    $("#tester").css("background-color", "rgb(" + Math.floor(Math.random() * 255) + "," + Math.floor(Math.random() * 255) + "," + Math.floor(Math.random() * 255) + ")");
    $("#tester").append("<p>" + $(this).attr("selected") + "</p>");
    if ($(this).attr("selected") == "true") {
        $(this).css("background-color", "transparent");
        $(this).attr("selected", "false");
    } else if ($(this).attr("selected") == "false") {
        $(this).css("background-color", "blue");
        $(this).attr("selected", "true");
    }
});

Answer 1

Why i cant use it in other tags?

因为它不是有效的 HTML。然后，浏览器会出现意外行为。

如果你想使用自定义属性，使用data-*:

<div class="category" data-selected="false">First</div>
$(".category").data('selected'); // get
$(".category").data('selected', value); // set

链接:

• https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes
• http://api.jquery.com/data/
• http://www.whatwg.org/specs/web-apps/current-work/multipage/elements.html#custom-data-attribute