Got a problem, anyway to make this code more efficient
Hello guys,
I started learning jQuery today and i have a problem already! Surprise lol.
Basically, i want a different <p> text to show whenever a user hovers over a link inside a <li> tag. I found a solution, kind of, but it looks a bit long and was wondering if there was anyway to shorten it. I've had to give each list item link and each <p> tag a different ID to show the different text.
-
$(document).ready(function(){
$("li a#one").hover(function () {
$("p#1").show("slow");},
function () {
$("p#1").hide("slow");
});
$("li a#two").hover(function () {
$("p#2").show("slow");},
function () {
$("p#2").hide("slow");
});
$("li a#three").hover(function () {
$("p#3").show("slow");},
function () {
$("p#3").hide("slow");
});
$("li a#four").hover(function () {
$("p#4").show("slow");},
function () {
$("p#4").hide("slow");
});
});
Thats basically it. Personally i was thinking of using a loop and an array? But i wouldnt know how to go about that really as i dont have much progamming experience anyway.
Thanks alot for your help
