如何通过类似事件简化此Javascript

Question

On my homepage I have these five divs

<table id="nav">
        <tr>

        <td><a href="coding.html"><div id="pagecl">C O D I N G</div></a></td>
        <td><div id="pagecl" class="high">A R T W O R K</div></td>
        <td><div id="logo"><img src="imageswebbing/icon.png"></div></td>
        <td><a href="extras.html"><div id="pagecl" class="more">E X T R A S</div></a></td>
        <td><a href="about.html"><div id="pagecl" class="last">A B O U T</div></a></td>

        </tr>
    </table>

this is the corresponding css:

#nav {
    margin:300px auto auto auto;
}

#pagecl {
    height:40px;
    width:200px;
    background-color:#151515;
    color:white;
    text-align:center;
    line-height:40px;
    opacity:0.7;
    font-family: Garamond;
    font-size:12px;
}

#logo {
    height:120px;
    width:120px;
}

And the javascript allows for slow fades with mouse enter and mouse leave, but if I only use the #pagecel id in the javascript, the intended effect is only seen on the first "Coding" div. That's why I added the class selectors for the other divs in the html and javascript. How do I condense this? There's probably a simple solution; I apologize for being a newbie.

$(document).ready(function() {  

   $('#pagecl').mouseenter(function() {
       $(this).fadeTo("slow",1);
   });

   $('#pagecl').mouseleave(function() {
   $(this).fadeTo("slow",.7);
   });

   $('.high').mouseenter(function() {
       $(this).fadeTo("slow",1);
   });

   $('.high').mouseleave(function() {
   $(this).fadeTo("slow",.7);
   });

   $('.more').mouseenter(function() {
       $(this).fadeTo("slow",1);
   });

   $('.more').mouseleave(function() {
   $(this).fadeTo("slow",.7);
   });

   $('.last').mouseenter(function() {
       $(this).fadeTo("slow",1);
   });

   $('.last').mouseleave(function() {
   $(this).fadeTo("slow",.7);
   });


});

Answer 1

IDs is unique identifiers. As per your statement I have these five divs

    <td><a href="coding.html"><div id="pagecl">C O D I N G</div></a></td>
    <td><div id="pagecl" class="high">A R T W O R K</div></td>     

make them unique or you can use a class to identify them

You can optimize your jQuery code as

Use , to pass multiple selectors .

$(document).ready(function () {
    $('#pagecl, .high, .more, .last').hover(function () {
        $(this).fadeTo("slow", 1);
    }, function () {
        $(this).fadeTo("slow", .7);
    });
});

Also use .hover() , its (selector).hover( handlerIn, handlerOut ) is shorthand for:

$( selector ).mouseenter( handlerIn ).mouseleave( handlerOut );

Answer 2

Use a class to describe what you're doing, then use that class as the selector.

$('.menuItem').mouseenter(function() {
   $(this).fadeTo("slow",1);
});
$('.menuItem').mouseleave(function() {
   $(this).fadeTo("slow",.7);
});

Then you don't need to have a bunch of selectors - just add the 'menuItem' class to anything you want that effect happening on.

Answer 3

if you are targeting modern browsers, you don't need javascript for this.

use css transition with :hover.

CSS EXAMPLE:

#pagecl:hover{
  opacity:0;
 }

#pagecl {
 opacity:1;
 transition: opacity 1s;
 /*add vendor prefixes -webkit etc...*/
}

.

Answer 4

You can always consider using a couple of subroutines to abstract repetitive behaviour:

function setMouseEvents(selector){
    $(selector).mouseenter(function(){
       $(this).fadeTo("slow", 1);
    })
    $(selector).mouseleave(function() {
       $(this).fadeTo("slow",.7);
    });
}

setMouseEvents('#pagecl');
setMouseEvents('.high');
//and so on

Answer 5

Give each one a class (x) also:

<div id="pagecl" class="last x">

notice you can have multiple classes (space separated) but not multiple id's...

then write once:

$('.x').mouseenter(function(){$(this).fadeTo("slow",1);});
$('.x').mouseleave(function(){$(this).fadeTo("slow",0.7);});

Answer 6

I guess your not aware of multiple classes. In your problem using a class you can make it more flexible.

An element can have more than one class seperated by a space but only one ID

<div class="more not me yes ..." id="unique"></div>

more is one class and not is second class and me is third class applied on to the div tag

mouseenter and mouseleave are = .hover(mouseenter,mouseleave);

$('.menuItem').hover(
               function() {
                   $(this).fadeTo("slow",1);
               },function() {
                  $(this).fadeTo("slow",.7); 
});

So add this to all the elements that want a hover effect

example

<div id="pagecl" class="high menuItem">A R T W O R K</div>