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代码优化为

使用,传递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 );

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

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

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

6 个答案: