如何通過類似事件簡化此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，則預期效果只能在第一個“ 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);
   });


});

Answer 1

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>     

使其具有獨特性，或者您可以使用類來識別它們

您可以將jQuery代碼優化為

使用,傳遞多個選擇器 。

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

Answer 2

使用一個類來描述您的工作，然后將該類用作選擇器。

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

然后，您不需要一堆選擇器-只需將'menuItem'類添加到您希望發生這種效果的任何內容。

Answer 3

如果您定位的是現代瀏覽器，則不需要javascript。

使用CSS過渡與：hover。

CSS示例：

#pagecl:hover{
  opacity:0;
 }

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

。

Answer 4

您始終可以考慮使用幾個子例程來抽象重復性行為：

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

還給每個人一個等級（x）：

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

請注意，您可以有多個類（以空格分隔），但不能有多個ID。

然后寫一次：

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

Answer 6

我猜你不知道多個類。 在使用類的問題中，您可以使其更靈活。

一個元素可以有多個用空格分隔的one class ，但只能有一個ID

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

更多是一類，不是第二類，而我是第三類，應用於div標簽

= .hover(mouseenter,mouseleave);和mouseleave是= .hover(mouseenter,mouseleave);

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

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

例

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