如何使用类似的事件简化此Javascript

On my homepage I have these five divs

在我的主页上我有这五个div

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

这是相应的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.

并且javascript允许鼠标输入和鼠标离开慢速淡入淡出，但如果我只在javascript中使用#pagecel id，则只在第一个“Coding”div上看到预期的效果。这就是我在html和javascript中为其他div添加类选择器的原因。我该如何压缩这个？可能有一个简单的解决方案;我为成为一名新手而道歉。

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


});

6 个解决方案

#1

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

ID是唯一标识符。根据你的陈述，我有这五个div

    <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

您可以优化您的jQuery代码

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:

也可以使用.hover（），它的（选择器）.hover（handlerIn，handlerOut）是以下的简写：

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

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

然后你不需要有一堆选择器 - 只需将'menuItem'类添加到你想要发生的任何效果上。

#3

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

如果您的目标是现代浏览器，则不需要使用javascript。

use css transition with :hover.

使用css过渡：悬停。

CSS EXAMPLE:

CSS示例：

#pagecl:hover{
  opacity:0;
 }

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

。

#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

#5

Give each one a class (x) also:

给每个人一个（x）类：

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

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

注意你可以有多个类（空格分隔）但不能有多个id ...

then write once:

然后写一次：

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

#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

一个元素可以有一个以空格分隔的类，但只有一个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

更多是一个类，而不是第二类，我是第三类应用于div标签

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

mouseenter和mouseleave = .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>

#1