无法使用jQuery更新背景图像

Question

代码：

var imgurl = 'img/star.png';
$("#venueId-"+nid).css('background','url("'+imgurl+'") no-repeat top right');

这是点击时发生的功能的开始。所需的结果是图像（img/star.png）出现在div的右上角。不幸的是，当这个脚本出现时，没有任何反应。

我仔细检查了图像的相对位置，当将背景更改为渐变时，我对此代码没有任何麻烦。

Answer 1

您的html已id="venueId"，而您正在呼叫$("#venueID-")。它也包含在一个函数中......并且你不会在任何地方调用函数。

根据你的jsfiddle。

所以我只是在你的jsfiddle中解决了这两件事，它现在起作用了......我也把宽度和高度从html移到了css。

jsfiddle updated

编辑：您可以尝试在jQuery中编写所有内容：

jsfiddle

或者如果你想按自己的方式使用它，我会稍微改变一下。您可以使用onclick而不是在href中调用javascript。我会使用函数表达式（foo = function(){}）而不是函数声明（function foo(){}）。 here is some more on that

jsfiddle

替代方案：

如果你想通过类选择器应用背景（这里的url在css中得到硬编码），你可以这样做（这实际上是Swordfish0321所说的）：

jsfiddle

Answer 2

打开firebug（Firefox）或Inspect Element（chrome），切换到“Net”标签，然后刷新页面，现在您可以看到'img / star.png'文件是否成功加载。

如果显示'404 Not Found'，则此图像的路径错误; 如果显示'403 Forbidden'，则此图像的权限不合适，请确保nginx / apache用户可以读取它。

Answer 3

很抱歉这个人说“你应该这样做”，而不是拼凑一些CSS的jquery连接。您可能只想创建一个CSS类，然后使用jquery进行切换。这将导致更清晰的执行和更可测试的代码，因为现在您正在分离职责。