1

有人可以帮我理解为什么这段代码不起作用吗？

$('#quick-search-header.widget-title').css('background-image', 'url(dd_includes/images/icons/sliding-menu-arrow-right.gif)');

我通过 Firebug 看到 background-image 已完全从 中删除#quick-search-header.widget-title，但上面的新背景图像已添加到element.style. 谢谢。

HTML -

<div id="quick-search-header" class="widget-title">
    <p>Quick search results</p>
</div>

CSS -

#quick-search-header.widget-title{
    background: #C60B46 url(dd_includes/images/icons/sliding-menu-arrow-down.gif) right 3px no-repeat;
}

完整的 JS（标有错误代码）-

$(document).ready(function(){

    $('input#s').val('');

    $('#quick-search-header.widget-title').live('click', function(){

        if($('#quick-search-content').hasClass('visible')){

            $('#quick-search-header.widget-title').css('background-image', 'url(dd_includes/images/icons/sliding-menu-arrow-right.gif)'); /** Not working */
            $('#quick-search-content').removeClass('visible')
            $('#quick-search-content').slideUp('600');

        } else {

            $('#quick-search-header.widget-title').css('background-image', 'url(dd_includes/images/icons/sliding-menu-arrow-down.gif)'); /** Not working */
            $('#quick-search-content').addClass('visible')
            $('#quick-search-content').slideDown('600');

        }

    });

});
4

3 回答 3

4

通过 jQuery 中的函数设置任何值css('attributename','attributevalue')都会将该属性添加到元素的内联样式中。在检查器中，它经常被标记为element.style

如果您只需要通过类来执行此操作，那么您可以创建一个带有备用背景图像的单独类，并通过从元素中添加/删除类来切换类，这不会出现在element.style中，而只是切换类，它将显示在检查器中。

您甚至可以使用toggleClass()允许您打开或关闭特定或多个类的功能。

文档如下：

切换类

添加类

移除类

或者你甚至可以通过在元素上设置一个属性来做到这一点.attr('class','newClassName');

由你决定。

于 2012-07-17T14:25:04.620 回答
4

  1. 确保相对路径正确。根据当前位置检查 10 次相对路径：javascript：

    窗口.位置.路径名

  2. 尝试： 首先将css定义为：

    .XXX { 背景图片： url() }

然后在javaScript中：

backgroundImage = "url('../images/image.png')"; //注意单引号

$(XXX).css("背景图片", backgroundImage);
//或
$(XXX).css({"background-image": backgroundImage});

于 2012-11-22T16:36:49.763 回答
0

尝试;

$('#quick-search-header.widget-title').css({'background-image':'url(dd_includes/images/icons/sliding-menu-arrow-right.gif)'});

希望这可以帮助...:)

于 2012-07-17T14:34:33.487 回答