Identifying li tags_问答_开发者_运维开发者技术经验分享

I have three li tags and each has a unique Id and I am trying to associate each with a different image. On hover, on a given li the image for that li will be shown by appending the image to a div. Let us say there was no unique id .... is it possible to associate a different images with each li tag ?

Any ideas ?

<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>

Use jQuery

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

Is just one of the many ways. The examples given here are very similar to what you are trying to achieve.

Edit: the code you added doesn't really relate to your original question

Something like this perhaps?

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

If you assign unique id to each li in ul, than you are able just to say in css file

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

Works everywhere, except IE6 and below, but fix can be found.

P.S. Didn't see that hover is needed, thanks for -1

NEW VERSION

Given the code above here is the javascript that will work (tested on jsbin, but I can't save it because of work firewalls.)

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

change the html like this:

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

original post

Here is a trick using just JavaScript and no library. Make an object with the field names equal to ids then you can reference the object to get the data using array notation. Here is a simple example.

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

then when you want to get the path if you have an obj with id you would say

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

or for question (in jQuery):

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

I leave how you want to display up to you.

For anyone out there who may want to implement this functionality, here is the script the functions the way I described above. Thanks to all, hopefully this code will help someone else.

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

I'm not sure I understand your question. Do you mean you want to attach events so that an image is shown for a specific li on a mouseover? If so:

Using jQuery:

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

A correction to that CSS solution posted above:

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

You can use Javascript BUT you can use CSS sprite to achieve this as well. Note you NEED to you tag because :hover support isn't support in all elements in all browsers. Only tag :hover support is cross-browser.

<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>

For the CSS styles, you will need to do the following so that your a tag is a block element.

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

You will make sure your list style accomodates your images as well. That is it should also be set as block elements or with set width/height.

A non frameworked answer would imply using DOM functions.

childNodes perhaps... Anyone willing to complete this? I'm quite short of time :/

Followup: now I remember... document.getElementsByTagName should do