Question

<script type="text/javascript" >
    $('li').mouseout(function () {
        divId = $(this).attr('id');
        $(this).css('background', 'url(assets/images/clients/logo/' + divId + '.jpg)');
    });
    $('li').mouseover(function () {
        divId = $(this).attr('id');
        $(this).css('background', 'url(assets/images/clients/logo-gc/' + divId + '.jpg)');
    });
    $('li').load(function () {
        divId = $(this).attr('id');
        $(this).css('background', 'url(assets/images/clients/logo/' + divId + '.jpg)');
    });
</script>

我犯了什么错误？页面加载后，图像未在启动时显示...

HTML：

<ul>
    <li id="i1"></li>   
    <li id="i2"></li>
    <li id="i3"></li>
    <li id="i4"></li>   
    <li id="i5"></li>
    <li id="i6"></li>
    <li id="i7"></li>   
    <li id="i8"></li>
</ul>

如何在页面加载后在li.load（）上加载默认图像？

Answer 1

使用background-image代替background，

$(this).css('background-image', 'url(assets/images/clients/logo/'+divId+'.jpg)');

要在页面加载后显示图像，请使用 $(document).ready(function(){ }) 处理程序

$(document).ready(function(){
   $('li').each(function(){
       $(this).css('background-image', 'url(assets/images/clients/logo/' + this.id + '.jpg)');
   });
});

Answer 2

试试这个，

$(function(){
   $('li').each(function(){
     var divId = $(this).attr('id');
     $(this).css('background-image', 'url(assets/images/clients/logo/'+divId+'.jpg)');
   });
});

Answer 3

据我所知<li>个元素没有jQuery.load方法（在您尝试访问的上下文中）。 jQuery.load documentation清楚地说明了：

此事件可以发送到与URL关联的任何元素：图像，脚本，框架，iframe和窗口对象

您应该将事件绑定到文档加载。简单的快捷方式是$(function() {...})，如下所示：

$(function() {
    $('ul li').each(function() {
        $(this).css('background', 'url(assets/images/clients/logo/'+ this.id +'.jpg)');
    });
});

li鼠标悬停的动态ID

3 个答案: