使用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')");

谁能指出我做错了什么？

Answer 1

您需要将.css()相对于页面。所以试试：

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

假设img/与页面位于同一目录中，这应该可行。否则使用根的相对路径。

Answer 2

您还可以尝试使用以下语法动态设置背景图像

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

Answer 3

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

<强> CSS：

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

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

<强> JQUERY：

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