用jQuery改变背景图片不起作用

有人可以帮我理解为什么这段代码不工作吗？用jQuery改变背景图片不起作用

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

我通过萤火虫看到背景图像已经从#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'); 

     } 

    }); 

});

来源

2012-07-17 David Gard

你说它已被添加到element.style，这是正确的。你认为什么不起作用？ – 2012-07-17 14:22:10

适合我使用.http：//jsfiddle.net/FN3uE/检查图片url是否导致404状态 – Chandu 2012-07-17 14:25:34

只是一个附注：为什么选择'＃quick-search-header.widget-title' ？由于'＃quick-search-header'是一个ID，只用它作为选择器就足够了。 – 2012-07-17 14:25:51

通过jQuery中的css('attributename','attributevalue')功能设置的任何值将添加属性为元素的内联样式。在检查其通常标记为element.style

如果需要通过类来完成这一仅则可以创建一个单独的类在交替的背景图像，并通过添加/从元件去除类别切换类，这将不会出现在element.style中，相反，它只会切换该类，而不会在检查器中显示。

你甚至可以使用toggleClass()函数，它可以让你打开或关闭特定或多个类。

文档如下：

toggleClass

addClass

removeClass

或者你甚至可以通过使用.attr('class','newClassName');

取决于你在元素上设置的属性做。

来源

2012-07-17 14:25:04

谢谢你，解释是非常很有帮助，而且我创建了第二个类来切换，而不是仅仅交换backgournd-image，所以现在一切都正常。 – 2012-07-17 14:35:46

尝试;

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

希望这有助于... :)

来源

2012-07-17 14:34:33

嗯，我几乎可以肯定这是错误的，'''''''''''''''''函数应该是''，因为它是分离参数。 – 2012-07-17 14:37:39

我试过这个，发现工作... – 2012-07-17 14:39:17

嗯有趣的是，我没有看到之前使用这种方法的语法，我会研究它。 – 2012-07-17 14:40:33

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

window.location.pathname
尝试： 首先定义的CSS为：

。XXX {背景图像：网址（）}

然后在JavaScript：

将backgroundImage = “URL（ '../图像/ image.png'）”; //注意单引号

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

来源

2012-11-22 16:36:49 jama

用jQuery改变背景图片不起作用

回答

相关问题