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

Why can I not use custom selected attribute?

本文关键字：选择 属性 自定义 不能 为什么      更新时间：2023-09-26

我正在尝试在我的HTML中使用自定义的"selected"属性，jQuery总是返回此属性的错误值。我知道，"选定"在选项标签中使用，但为什么我不能在其他标签中使用它？只需查看示例：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");
    }
});

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

因为它不是有效的 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
我认为

，问题不在于它本身"不起作用"，而只是它以一种稍微出乎意料的方式工作。

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

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

现在在你的Javascript中添加一些行：

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

（小提琴）

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

解决方案是什么？不要以与预期相反的方式使用属性。遵循规范，您的生活将更加快乐。HTML5提供了data-*属性，您可以尽情使用。

相关文章：