Question

我遇到以下问题：

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

我在点击label后尝试更改背景图片。

我在页面中有5个label，但是当我点击label时，背景应该会改变它。应重置其他标签以使用此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是否有效。

对于多个label，您可以使用选择器：

$("#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)");        
});

Answer 2

首先你在这里混合香草javascript和jquery，看起来有点傻。如果你想改变其他标签以“重置”它们，你可以这样做：

 $(document).ready(function() {

  $('#giftcard').delegate('label', 'click', function() {

    $(this).css('background', 'url(giftcard_icon-d.jpg)');

    $('#giftcard > label').not(this)
     .css('background', 'url(giftcard_icon-a.jpg)');

  }); 

});

小提琴： http://jsfiddle.net/garreh/GUFtx/

Answer 3

如果我理解正确，这应该可以解决问题

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

工作样本 http://jsfiddle.net/FvNdR/

Jquery和CSS后台更改

3 个答案: