javascript - 我怎样才能用类似的事件简化这个 Javascript

Question

在我的主页上我有这五个 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>

这是对应的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;
}

并且 javascript 允许通过鼠标进入和鼠标离开进行缓慢淡入淡出，但是如果我只在 javascript 中使用#pagecel id，则预期效果只能在第一个“编码”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);
   });


});

Answer 1

IDs 是唯一标识符。根据您的陈述我有这五个 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>     

使它们独一无二或者您可以使用类来识别它们

您可以将 jQuery 代码优化为

使用,传递multiple selectors .

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

也可以使用 .hover() , 它的 (selector).hover( handlerIn, handlerOut ) 是以下内容的简写:

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