javascript - Jquery和CSS背景变化

Question

我在使用以下行时遇到问题:

document.getElementById("giftcard").getElementsByTagName("label").style.backgroundImage ="url(giftcard_icon-d.jpg)";

我尝试在单击标签后更改背景图像。

我在一个页面中有 5 个标签，但是当我点击标签时，背景应该改变它。其他标签应重置为使用此 giftcard_icon-d.jpg 图像作为背景。

我该如何解决这个问题？

$(document).ready(function() {
    $('#giftcard label').click(function() {
       document.getElementById("giftcard").getElementsByTagName("label").style.backgroundImage ="url(giftcard_icon-d.jpg)";
       this.style.backgroundImage ="url(giftcard_icon-a.jpg)";      
}); 

Answer 1

如果您使用 jQuery，这应该可以解决问题:

$(document).ready(function() {
    $('#giftcard label').click(function() {
        $("#giftcard label").css("background-image", "url(giftcard_icon-a.jpg)");
    });
});

但这还取决于 ID 是否正确、标签是否存在以及图像 URL 是否有效。

对于多个标签，您应该可以使用选择器:

$("#giftcard > label").css("background-image", "url(giftcard_icon-a.jpg)");

在准确地得出您想要的内容后进行更新:

$('#giftcard label').click(function() {
    $("#giftcard label").css("background-image", "url(giftcard_icon-d.jpg)");
    $(this).css("background-image", "url(giftcard_icon-a.jpg)");        
});