Question

有人可以帮我理解为什么这段代码无效？

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

我通过Firebug看到背景图片已完全从#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');

        }

    });

});

Answer 1

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

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

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

文档如下：

toggleClass

addClass

removeClass

或者你甚至可以通过使用.attr('class','newClassName');
在元素上设置属性来实现
由你决定。

Answer 2

确保相对路径正确。检查相对于当前位置的相对路径的10倍：的javascript：

window.location.pathname
尝试： 首先将css定义为：

.XXX {background-image：url（）}

然后在javaScript中：

backgroundImage =“url（'../ images / image.png'）”; //注意单引号

$（XXX）.css（“background-image”，backgroundImage）;
  //或
  $（XXX）.css（{“background-image”：backgroundImage}）;

Answer 3

尝试;

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

希望这有助于...... :)

使用jQuery更改背景图像不起作用

3 个答案: