我如何才能簡化此Javascript有類似事件

在我的主頁我有這五個div的我如何才能簡化此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>

這是對應的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); 
    }); 


});

來源

2014-01-22 MMP

ID是唯一的，你不能使用他們不止一次。 – adeneo

要擴展@ adeneo的評論，儘管您可以*將多個位置的ID寫入您的標記，並將其視爲*有效*標記，您應該爲唯一項目使用ID（因此每個實例只能使用一次）。任何落入可重複單位的東西都應該用類名指定。多次使用相同的ID可能會導致腳本問題，而不僅僅是簡單的驗證失敗。 –

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

來源

2014-01-22 18:36:53 Satpal

在OP不知道的情況下需要注意 - 這是jQuery - 您必須添加依賴項。 – user1477388

嗯，OP是使用jQuery，就在他們的代碼示例中... –

@ user1477388，請建議您引用哪個依賴關係 – Satpal

使用一個類來描述你在做什麼，然後使用該類作爲選擇。

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

然後，你不需要有一堆選擇的 - 只需要添加的「菜單項」級到任何你想要這種效果發生在。

來源

2014-01-22 18:39:34 Stephen

+1這是一個更易維護的解決方案。 –

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

使用css transition with：hover。

CSS實例：

#pagecl:hover{ 
    opacity:0; 
} 

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

。

來源

2014-01-22 18:40:48 CodeToad

你總是可以考慮使用一對夫婦子程序抽象的重複行爲：

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

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

來源

2014-01-22 18:41:15 hugomg

給每一個類（X）也：

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

通知，你可以有多個類（空間分開）但不是多個ID的...

然後寫入一次：

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

來源

2014-01-22 18:48:01

斯蒂芬已經回答說，你有什麼補充嗎？ – Satpal

是的空間分隔的類，我的代碼更容易（.7爲0.7）爲一個新的理解和我的班級是他的現有班級附加，所以它應該寫得較小，因爲它不重要的主要類'.last' –

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

一個元素可以有超過one class用空格分隔，但只有一個ID

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

更是一個類，而不是爲第二課堂，我是第三類應用到div標籤

的mouseenter和鼠標離開被= .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>

來源

2014-01-22 18:52:00 niko

我如何才能簡化此Javascript有類似事件

回答

相關問題