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

在我的主页上，我有这五个分区

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

javascript允许鼠标进入和鼠标离开时缓慢淡出，但如果我在javascript中只使用#pagecel id，预期效果只能在第一个“编码”部分看到。这就是为什么我在html和javascript中为其他部分添加了类选择器。我如何浓缩这个？可能有一个简单的解决方案；我为自己是个新手而道歉

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


});

---

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>     

也可以使用它的

（选择器）。悬停（handlerIn，handlerOut）

是指：

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

---

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>     

也可以使用它的

（选择器）。悬停（handlerIn，handlerOut）

是指：

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

---

使用一个类来描述您正在做的事情，然后使用该类作为选择器

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

---

然后你就不需要一堆选择器了——只需将“menuItem”类添加到任何你想要的效果上。

使用一个类来描述你正在做的事情，然后使用该类作为选择器

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

---

那么你就不需要一堆选择器了——只需将“menuItem”类添加到任何你想要的效果上即可。

如果你的目标是现代浏览器，你不需要javascript

将css转换与：hover一起使用

CSS示例：

#pagecl:hover{
  opacity:0;
 }

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

---

.

如果你的目标是现代浏览器，你不需要javascript

将css转换与：hover一起使用

CSS示例：

#pagecl:hover{
  opacity:0;
 }

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

---

您可以考虑使用一些子程序来抽象重复行为：

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

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

---

<>你可以考虑使用一些子程序来抽象重复行为：

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

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

给每个人一个等级（x）：

给每个人一个等级（x）：

---

我猜你不知道有多个班级。在使用类的问题中，可以使其更灵活

一个元素可以有多个由空格分隔的类，但只能有一个ID

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

因此，将其添加到所有需要悬停效果的元素中

范例

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

A R T W R K

我想您可能不知道有多个类。在使用类的问题中，可以使其更灵活

一个元素可以有多个由空格分隔的类，但只能有一个ID

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

因此，将其添加到所有需要悬停效果的元素中

范例

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

A R T W R K

ID是唯一的，您不能多次使用它们。若要扩展@adeneo的注释，虽然您可以在标记中写入多个位置的ID，但要将其视为有效的标记，您应该为唯一的项目使用ID（因此，每个实例只能使用一次）。属于可重复单元的任何内容都应该用类名指定。多次使用同一ID可能会导致脚本问题，不仅仅是验证失败。ID是唯一的，您不能多次使用它们。若要扩展@adeneo的注释，虽然您可以将ID写入标记中的多个位置，但要将其视为有效标记，您应该对唯一项使用ID（因此，每个实例只能使用一次）。属于可重复单元的任何内容都应该用类名指定。多次使用同一ID可能会导致脚本编写问题，不仅仅是验证失败。如果OP不知道-这是jQuery-需要注意，您必须添加依赖项。@user1477388，请建议您使用哪个依赖项refering@mori57的确，但当我发表评论时，代码段中没有jQuery标记，也没有jQuery代码。OP必须是在我发布后添加的。重要的是要注意，如果OP不知道-这是jQuery-您必须添加依赖项。@user1477388，请建议您是哪一个依赖项refering@mori57确实如此，但当我发表评论时，代码段中没有jQuery标记，也没有jQuery代码。OP一定是在我发布后添加的。Stephen已经回答了，你有什么要添加的吗？是的，空间分隔类，我的代码更简单（.7是0.7）对于一个新手来说，我的类是他现有类的附加类，因此应该写得更小，因为它对他的主类没有太大意义。上一个“Stephen已经回答过了，你有什么要添加的吗？是的，空格分隔的类，我的代码更简单（.7是0.7）对于新认识的人来说，我的类是他现有类的附加类，所以应该写得更小，因为它对他的主类意义不大