Question

我使用jQuery脚本动态设置背景但是.css函数似乎不起作用。这是脚本：

$(document).ready(function () {

    $(".VociMenuSportG").each(function () {

        var fullHref = $(this).find('a').attr('href');
        console.log(fullHref);
        var pos = fullHref.indexOf("IDSport=") + 8;
        console.log(pos);
        var sportNum = fullHref.substr(pos, 3);
        console.log(sportNum);
        var imageName;

        switch (sportNum.toString()) {

            case '523':
                imageName = "../Images/soccer_ball01.png";
                break;
            case '468':
                imageName = "../Images/soccer_ball01.png";
                break;
        }

        console.log(imageName);
        $(this).css('background-image', 'url (' + imageName + ')');

    });
});

脚本遍历每个项目（VociMenuSportG），在列表项中查找链接的路径，然后设置列表项的背景图像。脚本成功运行，没有错误，并使用console.logs我可以看到选择了正确的路径。但背景图像根本没有设置？我想知道我是否可能错误地使用.css函数？

修改

尝试将图像的路径设置为绝对路径而不是相对路径，但仍然没有运气

Answer 1

您的案例中的问题是url和(之间的空格。删除它将起作用的空间。

 $(this).css('background-image', 'url(' + imageName + ')');

Answer 2

使用该方法的正确形式是：

$(this).css( { 'background-image' : 'url(' + imageName + ')' } );

如果你创造了一个小提琴，我会给你更多信息来解决它。

Answer 3

我不确定是什么错，但首先尝试设置另一个css属性，看看是否有效。

例如： Css（＆＃39; border＆＃39;，＆＃39; 1px solid red＆＃39;）

我还发现了“网址”之间的空格。和＆＃39;（＆＃39;。也许这不起作用？

如果它没有：您是否尝试从浏览器调试工具栏手动设置属性以测试您使用的URL实际上是否正确？您使用＆＃39; ../'在你的网址让我怀疑。 ../通常用于css文件中，例如从/ css指向/ images。但在这种情况下，你不在/ css。所以试试：＆＃39; /Images/soccer_ball01.png'例如。

（编辑：虽然写的答案已经发布了，但是好吧，也许这会澄清下次如何调试...... :)）

Answer 4

<强>建议：

您可以像这样使用background代替background-image：

$(this).css('background', 'url(' + imageName + ')');

jQuery设置css背景图像

4 个答案: