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

为什么我不能在其他标签中使用它？

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

如果您想使用自定义属性，请使用data-*个：

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

链接：

Answer 2

问题不在于，我认为它“本身不起作用”本身，只是它以一种意想不到的方式运作。

例如，如果我们稍微修改您的HTML：

<div class="category" selected="false" data-selected="false">First</div>

现在为您的Javascript添加一些行：

console.log($(this).attr('data-selected'));
console.log($(this).attr('selected'));

(jsFiddle)

令人惊讶的事情发生了。第一行记录false，如您所料。第二行记录selected。显然~~浏览器（在我的情况下是Chrome，我还没有测试过其他人）~~ jQuery（根据Blue Skies的评论）正在做的事情，例如，option元素，并且无论实际内容是什么，都将selected属性的值设为字符串selected。

解决方案？不要以与预期相反的方式使用属性。遵循规范，您的生活将更加快乐。 HTML5提供data-*属性，您可以根据自己的内容使用这些属性。

为什么我不能使用自定义选择的属性？

2 个答案: