Question

我有三个li标签，每个都有一个唯一的ID，我试图将每个标签与不同的图像相关联。在悬停时，在给定的li上，将通过将图像附加到div来显示该li的图像。让我们说没有唯一的ID ....是否可以将不同的图像与每个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>

Answer 1

使用jQuery

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

只是众多方式中的一种。给出的here示例与您要实现的示例非常相似。

编辑：您添加的代码与原始问题无关

Answer 2

如果您为ul中的每个li分配唯一ID，那么您只能在css文件中说明

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

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

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

Answer 3

新版本

鉴于上面的代码是可以使用的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而没有库的技巧。创建一个字段名称等于ids的对象，然后您可以引用该对象以使用数组表示法获取数据。这是一个简单的例子。

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]
});

我留下你想要展示给你的方式。

Answer 4

或许这样的事情？

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

Answer 5

对于那些可能想要实现此功能的人，这里的脚本功能与我上面描述的方式相同。感谢所有人，希望这段代码可以帮助其他人。

<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();
        }
    );
});

Answer 6

我不确定我理解你的问题。您是否想要附加事件，以便在鼠标悬停时显示特定li的图像？如果是这样的话：

使用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); }

Answer 7

你可以使用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样式，您需要执行以下操作，以便您的标记是块元素。

#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;}

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

Answer 8

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

childNodes也许......有谁愿意完成这个？我的时间很短：/

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

识别li标签

8 个答案: