标识li标签

我有三个li标签，每个标签都有一个唯一标识，我试图将每个标签与不同的图像关联。悬停时，在给定的li上，该li的图像将通过将图像附加到div来显示。让我们说，没有唯一的ID ....是否有可能将不同的图像与每个li标签关联？标识li标签

任何想法？

<script type="text/javascript"> 
$(document).ready(function() { 
    var img1 = new Image(); 
    $(img1).attr('src', 'images/img1.jpg');  
    $("li").hover(
     function(){ 
      $('#articleimage').append(img1); 
     } 
    ); 
}); 
</script> 
</head> 

<body> 
<div id="parent" style="width:560px"> 
    <div id="articlelist" style="float:left; width:210px"> 
     <ul id="newslist" > 
      <li id="1">Todays world<img src='images/more.jpg'/></li>     
      <li id="2">Connecting the world<img src='images/more.jpg'/></li> 
      <li id="3">Evolution of data storage<img src='images/more.jpg'/></li> 
     </ul> 
    </div> 
    <div id="articleimage" style="float:right; width:350px"> 

    </div> 
</div>

来源

2010-02-05 Binaryrespawn

我编写了一个解决方案，并张贴在下面 - 它适用于jsbin测试（工作防火墙不要让我保存到jsbin） – Hogan

对于任何人在那里谁可能要实现这个功能，这里是脚本的功能描述我的方式以上。感谢所有人，希望这段代码能够帮助别人。

<script type="text/javascript"> 
$(document).ready(function() { 
    var img1 = new Image(); 
    var img2 = new Image(); 
    var img3 = new Image(); 
    $(img1).attr('src', 'images/img1.jpg');  
    $(img2).attr('src', 'images/img2.jpg');  
    $(img3).attr('src', 'images/img3.jpg'); 
    var imgs = new Array(); 
    imgs[0] = img1; 
    imgs[1] = img2; 
    imgs[2] = img3; 
    $("li").hover(
     function(){ 
      $('#articleimage').append(imgs[$(this).index()]); 
     }, 
     function(){ 
      $('#articleimage').find('img').remove(); 
     } 
    ); 
});

来源

2010-02-09 18:16:24 Binaryrespawn

使用jQuery

$("li#yourid").hover(function() { 
    $(this).html('<img src="yourimage.png" />'); 
});

只是众多方法之一。给出的示例here与您试图实现的非常相似。

编辑：您添加的代码并没有真正涉及到你原来的问题

来源

2010-02-05 17:53:36

不是一个jQuery的问题，jQuery是好的，但它不该”不是每个js问题的答案。 – Rob

@Rob：为什么不呢？ –

他添加的代码与原始问题有关。他希望在列表中添加另一张图片（文章标题）。 – Hogan

如果您分配唯一的ID在UL每个L1，比你能只是在css文件中说

#liId img { display: none; } 
#liId:hover img { display: block; }

无处不在，除了IE6及以下版本，但可以找到修复。

P.S.没有看到需要悬停，谢谢-1

来源

2010-02-05 17:53:39 Vestel

-1我相信他希望在悬停而不是一般情况下做到这一点。 –

我不知道我理解你的问题。你的意思是你想附加事件，以便在mouseover上显示特定的图像吗？如果是这样的：

使用jQuery：

jQuery("li#idOfTheLi").mouseover(function() { 
    //code to handle the mouseover event 
});

校正到CSS的解决方案上面贴：

#li1:hover { background-image: url(picture/1.jpg); } 
#li2:hover { background-image: url(picture/2.jpg); }

来源

2010-02-05 17:54:18

SO中的顺序不是静态的。上面或下面的问题可能会改变。 – Hogan

新版本

上面给出这里的代码是JavaScript代码将工作（在jsbin上测试，但由于工作防火墙，我无法保存它）。

var idMap = { 
    id1: "http://sstatic.net/so/img/logo.png", 
    id2: "http://sstatic.net/sf/img/logo.png", 
    id3: "http://sstatic.net/su/img/logo.png" 
}; 

$(document).ready(function() { 
    $("li").hover(
     function(){ 
      $('#imgid')[0].src = idMap["id"+this.id.toString()]; 
     }, 
     function(){ 
     ;} 
    ); 
});

更改HTML这样的：

<div id="articleimage" style="float:right; width:350px"> 
<img id="imgid" src='http://sstatic.net/so/img/comment-up-hover.png'/> 
    </div>

原帖

这里只使用JavaScript和没有图书馆一招。使用等于id的字段名称作为对象，然后可以引用对象以使用数组表示法获取数据。这是一个简单的例子。

var idMap = { 
    id1: "path1", 
    id2: "path2", 
    id3: "path3" 
};

那么当你想，如果你有ID的OBJ得到的路径，你会说

idMap[obj.id]; // this is path1 - path3 if obj.id is one of id1 - id3

或（jQuery的）问题：

$("li").hover(function() { 
    // display image located at idMap[this.id] 
});

我留下怎样你想显示给你。

来源

2010-02-05 17:57:08 Hogan

也许这样的事情？

$("li").mouseover(function(){ 
var id = $(this).attr("id"); 
});

来源

2010-02-05 18:05:49

您可以使用JavaScript，但你可以使用CSS精灵来实现这一点。请注意，您需要标记，因为：悬停支持不支持所有浏览器中的所有元素。只有标签：悬停支持是跨浏览器。

<ul id="mylist"> 
    <li id="item1"><a href="javascript:void(0);">SEO Text description of the Image.</a></li> 
    <li id="item2"><a href="javascript:void(0);">SEO Text description of the Image.</a></li> 
</ul>

对于CSS样式，您需要执行以下操作，以便您的a标记是块元素。

#mylist a{ 
    display:block; 
    width:100px; 
    height:100px; 
} 
#mylist a{ 
} 
#mylist #item1 a{ background: url(spriteimage1.jpg) top left;} 
#mylist #item1 a:hover{ background: url(spriteimage1.jpg) bottom left;} 

#mylist #item2 a{ background: url(spriteimage2.jpg) top left;} 
#mylist #item2 a:hover{ background: url(spriteimage2.jpg) bottom left;}

您将确保您的列表样式适合您的图像。也就是说，它也应该设置为块元素或设置宽度/高度。

来源

2010-02-05 19:31:04 jonycheung

非框架化答案意味着使用DOM函数。

childNodes也许...任何人都愿意完成这个？我很短的时间：/

跟帖：现在我还记得... document.getElementsByTagName应该做

来源

2010-02-05 19:44:10 Alfabravo

回答

相关问题