Question

当我按下另一个div时，我正试图改变一个div的背景图像。我正在使用jQuery并且已经发现了这样做......

$('#input_id').click(function() {
  $('#div_id').css('background-image','url')
});

但是，我需要做的不仅仅是更改一个div的背景图像，还必须为其他几个动画制作动画。

我目前正在使用......

$('#input_id').click(function() {
$('#div1').animate({
    left: '0px'
}, 600);
$('#div2').animate({
    left: '-100%'
}, 1000);
$('#div3').animate({
    right: '-100px'
}, 200);
$('#div4').animate({
    top: '0px'
}, 600);
});

这样可以正常工作并完成我需要的所有工作，但是当我将其添加到列表中时......

$('#div5').css({
    'background-image', 'url(../images/backgrounds/background2.png)');

完全停止工作。这是我的完整代码...

$('#input_id').click(function() {
$('#div1').animate({
    left: '0px'
}, 600);
$('#div2').animate({
    left: '-100%'
}, 1000);
$('#div3').animate({
    right: '-100px'
}, 200);
$('#div4').animate({
    top: '0px'
}, 600);
$('#div5').css({
    'background-image', 'url(../images/backgrounds/background2.png)');
});

Div 5的CSS背景图像代码是......

#div5 {
...
background-image:url(../images/backgrounds/background1.png);
...
}

任何人都可以看到为什么这不起作用的原因？我做过一些明显错误的事情，或者错过了某些地方的某些事情吗？

Answer 1

有两件事......

$('#div5').css({
    'background-image': 'url(images/backgrounds/background2.png)'
});

首先，在该位代码的末尾有一个语法错误（两个结束括号）。

其次，这是一个纯粹的猜测，但你的CSS文件可能在css（或样式）文件夹中。从那里引用images文件夹为../images是正确的，而不是从页面中运行的脚本引用。（注意我删除了前导../）。

Answer 2

你错过了"});"

    $('#input_id').click(function() {
    $('#div1').animate({
        left: '0px'
    }, 600);
    $('#div2').animate({
        left: '-100%'
    }, 1000);
    $('#div3').animate({
        right: '-100px'
    }, 200);
    $('#div4').animate({
        top: '0px'
    }, 600);
    $('#div5').css({
        'background-image', 'url(../../images/backgrounds/background2.png)');
    });
});

Answer 3

我建议不要将实际的css放在jQuery中，因为这很难维护。

而是使用jQuery添加类并在css文件中指定background属性。

$('#div5').addClass("myclass");

.myclass {
    background-image: url(images/backgrounds/background2.png);
}

然后，如果需要，可以使用removeClass（）方法将其删除。

$('#div5').removeClass("myclass");

Answer 4

您

$('#div5').css({
    'background-image', 'url(../images/backgrounds/background2.png)');

包含{

$('#div5').css('background-image', 'url(../images/backgrounds/background2.png)');

Answer 5

试试这个：

$('#div5').css('background-image', 'url(../images/backgrounds/background2.png)');

当单击另一个div时，如何更改div的背景图像？

5 个答案: