Question

我想知道是否有人能告诉我为什么这不起作用。我只想在单击div（带有id“el”）时更改背景图像。它应该从“elephant coloured1”改为“elephant coloured2”，但它不起作用。任何帮助，将不胜感激。谢谢:)

HTML：

<body>
    <div id = "el"> </div>
</body>
</html>

和jQuery：

$(document).ready( function() {
  $('#el').click(function() {
     $(this).css("background-image", 'url(elephant coloured2.svg)'); 
  });
});

CSS：

#el {
    background-image: url("elephant coloured1.svg");
    height: 190px;
    width: 250px;
}

Answer 1

试

$('#el').click(function() {
  $(this).css("background-image", 'url("elephant coloured2.svg")');
});

带引号。

Answer 2

尝试使用背景而不是背景图像

fiddle

.el {
  background-image: url("elephant coloured1.svg");
  height: 190px;
  width: 250px;
  z-index:-1;
}
.el1 {
  background-image: url("elephant coloured2.svg");
  height: 190px;
  width: 250px;
}

$(document).ready( function() {
  $('#el').click(function() {
  $(this).toggleClass('el1');
});

将它们作为课程。并使用切换类。

问题可能是你的z-index。

或者只是尝试

#el {
  background-image: url("elephant coloured1.svg");
  height: 190px;
  width: 250px;
  z-index:-1;
}

Answer 3

您的SVG图片似乎存在问题 - 因为您的代码在这里运行正常 -

http://jsfiddle.net/7fJVa/2/

$(document).ready( function() {
     $('#el').click(function() {
         $(this).css("background-image", 'url(https://www.google.co.in/images/srpr/logo11w.png)');
     });

});

或者Jquery可能没有正确附加。检查控制台是否存在JS错误。

Answer 4

您是否在Chrome上执行？试试Mozilla并尝试下面的代码。

<body>

<div id = "el"> Click Me!!! </div>

</body>

</html>

和查询

$(document).ready( function() {



                $('#el').click(function() {
                    $(this).css("background-image", 'url("elephant coloured2.svg")'); });

});

你的CSS很好。

Answer 5

也许您的图片网址需要短划线或下划线而不是空格，如下所示：elephant-coloured2.svg不是这样的：elephant coloured2.svg

单击更改背景图像（jQuery）

5 个答案:

fiddle