Jquery 背景不'；不变

你好

HTML

<div id="Button"></div>

<div id="Button"></div>

JQuery

$("#Button").on("click",function() {
  $(this).css("background", 'url("../images/pause.png") left center no-repeat;');
});

$("#Button").on("click",function() {
  $(this).addClass("bg");
});

---

但不幸的是，背景并没有改变。为什么不这样做？

尝试分别设置每个属性。

---

您还应该检查url是否正确。

尝试分别设置每个属性。 此外，您还应检查url是否正确。

尝试以下操作：

$("#Button").on("click", function () {
    $(this).css({
        'background-image': 'url("../images/pause.png")', 
        'background-position': 'left center', 
        'background-repeat': 'no-repeat'
    });
});

正如Bergi和AndréDion在评论中提到的，如果背景图像不需要更改，您可以删除

背景位置

和

背景重复

属性。

尝试以下操作：

$("#Button").on("click", function () {
    $(this).css({
        'background-image': 'url("../images/pause.png")', 
        'background-position': 'left center', 
        'background-repeat': 'no-repeat'
    });
});

---

正如Bergi和AndréDion在评论中提到的那样，如果背景图像不需要更改，您可以删除

背景位置

和

背景重复

属性。

问题可能是图像路径不正确或css中的分号（添加分号将使其无法工作）。我已经创建了一个JSFIDLE，它演示了您的问题的解决方案，尽管使用了其他图像，因为我无法访问您的原始图像

相关js代码复制如下：

$("#Button").on("click", function(){
    $(this).css('background', 'url(../images/pause.png) left center no-repeat');
})

---

问题可能是错误的图像路径或css中的分号（添加分号将使其无法工作）。我已经创建了一个JSFIDLE，它演示了您的问题的解决方案，尽管使用了其他图像，因为我无法访问您的原始图像

相关js代码复制如下：

$("#Button").on("click", function(){
    $(this).css('background', 'url(../images/pause.png) left center no-repeat');
})

---

您的问题是属性值末尾的半列。删除它并尝试

例：

在指定css属性名的值时，如果出现半列，则该属性名无效，并且无法应用

 $(this).css("background", 'url("../images/pause.png") left center no-repeat;');
                                                                            ^___ Here

---

还要注意的是，直接将css应用于元素会使样式的级联更加困难，并且不易维护，因为它们直接应用于元素的style属性。最好的方法是添加css规则并将类设置为元素

您的问题在于属性值末尾的半列。删除它并尝试

例：

在指定css属性名的值时，如果出现半列，则该属性名无效，并且无法应用

 $(this).css("background", 'url("../images/pause.png") left center no-repeat;');
                                                                            ^___ Here

---

还要注意的是，直接将css应用于元素会使样式的级联更加困难，并且不易维护，因为它们直接应用于元素的style属性。最好的方法是添加css规则并将类设置为元素

这是一种更有效的方法，您可以分离代码

HTML

<div id="Button"></div>

<div id="Button"></div>

带bg类的div

分区背景{

background: url("../images/pause.png") left center no-repeat;

}

JQuery

$("#Button").on("click",function() {
  $(this).css("background", 'url("../images/pause.png") left center no-repeat;');
});

$("#Button").on("click",function() {
  $(this).addClass("bg");
});

---

这是一种更有效的方法，可以分离代码

HTML

<div id="Button"></div>

<div id="Button"></div>

带bg类的div

分区背景{

background: url("../images/pause.png") left center no-repeat;

}

JQuery

$("#Button").on("click",function() {
  $(this).css("background", 'url("../images/pause.png") left center no-repeat;');
});

$("#Button").on("click",function() {
  $(this).addClass("bg");
});

---

---

没有明显的错误。请在您正在使用的环境中做一个演示（当您调用代码段时，DOM看起来如何）。可能吧？您的问题可能与文件系统的结构有关。路径

。/images/

与执行它的上下文相关，这取决于CSS和JS所在的位置，可能不同。没有明显的错误。请在您正在使用的环境中做一个演示（当您调用代码段时，DOM看起来如何）。可能吧？您的问题可能与文件系统的结构有关。路径

。/images/

与执行它的上下文相关，这取决于CSS和JS所在的位置，可能不同。您可以忽略后两个，因为它们与初始CSS值没有差异。如果属性不变，则无需重新设置

背景位置

和

背景重复

属性。您可以忽略后两个，因为它们与初始CSS值没有差异。无需重新设置属性

background position

和

background repeat

属性（如果它们没有更改）。您的解决方案与OP的有什么不同？他的CSS有什么是无效的？我想在我的回答中很清楚-分号不正确，图像路径可能不正确（但我不能确定）。此外，我还有一个在JSFIDLE中链接的代码示例。我认为用一个有效的例子来否决一个正确的答案可能有点苛刻@AndréDion-请不要成为一个巨魔。否决票是SO的一部分，是衡量内容质量的一种方式，你要习惯它。您最初的回答没有提到任何关于分号的内容，只是说他的CSS无效。我理解这一点，但我更习惯于在您提到的低质量内容上使用否决票，而不是正确回答张贴的问题、解释可能的原因并提供解决方案的功能示例的内容，就像这个答案一样。你的解决方案和OP的有什么不同？他的CSS有什么是无效的？我想在我的回答中很清楚-分号不正确，图像路径可能不正确（但我不能确定）。此外，我还有一个在JSFIDLE中链接的代码示例。我认为用一个有效的例子来否决一个正确的答案可能有点苛刻@AndréDion-请不要成为一个巨魔。否决票是SO的一部分，是衡量内容质量的一种方式，你要习惯它。您最初的回答没有提到任何关于分号的内容，只是说他的CSS无效。我理解这一点，但我更习惯于在您提到的低质量内容上使用否决票，而不是正确回答张贴的问题、解释可能的原因并提供解决方案的功能示例的内容，就像这个答案一样。谢谢。回答很好，但我想知道我的代码中的错误在哪里。谢谢你的回答+1） 谢谢。回答很好，但我想知道我的代码中的错误在哪里。谢谢你的回答+1） 是的，谢谢你的帮助，我不知道