1

我试图在我的 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");
    }
});
4

2 回答 2

5

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

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

如果要使用自定义属性，请使用data-*：

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

链接：

于 2013-11-07T19:05:30.900 回答
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属性的值设为 string selected，不管实际内容是什么。

解决方案？不要以与预期相反的方式使用属性。遵循规范，您的生活会更快乐。HTML5 提供了data-*属性，您可以随心所欲地使用这些属性。

于 2013-11-07T19:08:38.233 回答