1

HTML でカスタムの「selected」属性を使用しようとしていますが、jQuery は常にこの属性の間違った値を返します。「selected」がオプションタグで使用されていることは知っていますが、他のタグで使用できないのはなぜですか? 例を参照してください: 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

2

問題は、それ自体が「機能しない」ことではなく、少し予期しない方法で機能することだけだと思います。

たとえば、HTML を少し変更すると、次のようになります。

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

次に、Javascript にいくつかの行を追加します。

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

(jsフィドル)

驚くべきことが起こります。ご想像のとおり、最初の行は logfalseです。2 行目はログを記録しselectedます。明らかにブラウザ (私の場合は Chrome、他はまだテストしていません) jQuery (Blue Skies のコメントによる) は、たとえばoption要素に対して行うことを行い、selected属性の値を stringselectedにしています。実際の内容は。

ソリューション？意図された方法に反する方法で属性を使用しないでください。仕様に従うと、あなたの人生はより楽しくなります。HTML5data-*には、心ゆくまで使用できる属性が用意されています。

于 2013-11-07T19:08:38.233 に答える