使用jQuery更改背景图片

Question

我想使用jQuery更改表格单元格中的背景图像，该单元格具有自己的类名“.active”。 我正在使用jQuery更改同一位置中的其他元素，并且它们都可以正常工作，因此我认为我在语法方面可能有些问题。 我使用的函数在点击按钮后执行。

我的代码：

function vehicle(arg){
  $(".active").css("color", "blue");  
  $(".active").css("background-image", "url(../img/car.png)");
};

CSS：

.active{
  background-size: 10px 10px;
  background-repeat: no-repeat;
  border-right: 1px solid none;

第一行代码可以正常执行，我尝试了以下代码并在各种方式下更改了图片大小：

   $(".active").css("background-image", "../img/car.png");
   $(".active").css("background-image", "url('../img/car.png')");

有人可以指出我哪里做错了吗？

- LucyViolet

---

可能是 Switching a DIV background image with jQuery 的重复问题。 - miguelmpn

@miguelmpn 这怎么可能是重复的？不是重复。 - Praveen Kumar Purushothaman

Answer 1

您需要将.css()与页面相关联。因此，请尝试：

$(".active").css("background-image", "url('img/car.png')");

假设 img/ 与页面在同一目录下，这个方法就可以使用。否则请使用相对于根目录的路径。

- Praveen Kumar Purushothaman

---

如果我在“background-image”和“url（'img / car.png'）”之间使用“，”，则我的脚本开头的代码将无法运行，但如果我使用“：”，则我的其他代码可以工作，但背景不起作用。 - LucyViolet

@LucyViolet 使用 : 是针对对象的。我在这里使用了一个函数。 - Praveen Kumar Purushothaman

Answer 2

您也可以尝试以下语法来动态设置背景图片。

$(".active").attr("style", "background-image: url('your url')");

- Karthik Dhanasekaran

Answer 3

您可以设置CSS类来更改图像。

CSS：

.img1{
    background-image:img/car1.png;
}

.img2{
    background-image:img/car2.png;
}

jQUERY：

$(".active").removeClass('img1').addClass('img2');

- Ganya

---

这不是问题所在。首先，您不能像那样添加背景图像，并且为每个图像创建一个类不是一个好的方法。他只是想要正确的URL。 - Alexis