Here my Jquery code:
<script>
$('.smenu li').hover(function() {
var lid = $(this).find('li').attr('id');
closeAll();
//show perticular div
if(lid == "d1")
{
$('.hbg div#info1').show();
}
else if(lid == "d2")
{
$('div#info2').show();
}
else if(lid == "d3")
{
$('div#info3').show();
}
});
function closeAll()
{
$('div#info1').hide();
$('div#info2').hide();
$('div#info3').hide();
}
</script>
Here my info div
-s:
<开发者_如何学运维;div class="hbg">
<div class="solu_info" id="info1">
//display information
</div>
<div class="solu_info" id="info2">
//display information
</div>
.....
</div>
<div class="smenu">
<ul>
<li id="d1"><a href="#"><img src="images/menu_hosp.jpg" border="0"></a></li>
....
onmouse over the div tags are not getting changed. Why?
if else statement is just javascript, nothing to do with jquery. It always works. If it does not what you expect it to do something in your code logic is wrong.
Maybe it has to be:
var lid = $(this).attr('id');
just alert(lid)
and check if it contains a value (most likely not in your code).
You current code gets the id
of a li
element inside the li
element.
Obviously , if-else
will work if your code is right. Remember, it is more likely that you did something wrong as that the language has an error ;)
Seriously, you should read some tutorials and the documentation before posting a lot of questions here. Then you would know what find()
is doing and which elements $('.smenu li')
is selecting.
Update:
Ok, just for you:
This is your HTML
<div class="smenu">
<ul>
<li id="d1">...</li> // #1
<li id="d2">...</li> // #1
</ul>
the selector $('.smenu')
will select all the <li>
elements that I marked with #1
.
Not when you applying .find('li')
to such an element, it tries to find a li
element inside the li
element, i.e. it would select the elements I marked with #2
here:
<div class="smenu">
<ul>
<li id="d1"> // #1
<ul>
<li id="foo">...</li> // #2
</ul>
<li id="d2">...</li> // #1
</ul>
But this is not your structure. You don't have nested lists. You want the IDs from the #1
elements and therefore it has to be
var lid = $(this).attr('id');
Inside the hover event handler, this
is going to be an li
, since it is attached to $('.smenu li')
. Then $(this).find('li')
will find li
elements inside .smenu li
, which presumably don't exist.
Maybe switch
is what you need here.
精彩评论