Question

这是我的jquery代码完美无缺。

  $(document).ready(function(){
     $(".a").mouseover(function(){
             $("body").addClass("a");    
           });
     $(".a").mouseout(function(){
            $("body").removeClass("a");
        });
     $(".b").mouseover(function(){
             $("body").addClass("b");    
        });

        $(".b").mouseout(function(){
            $("body").removeClass("b");
        });
    $(".c").mouseover(function(){
             $("body").addClass("c");    
            });
    $(".c").mouseout(function(){
            $("body").removeClass("c");
        });
                   ..........etc
                   });
<html>
    <img class="a" src="images/p1.jpg" >
    <img class="c" src="images/p3.png">
    <img class="d" src="images/p4.jpg">
</html>

我想知道是否可以简化它，因为它看起来非常多余。

谢谢

Answer 1

在DOMready中你可以有一个hover处理程序来切换你的类：

function onHover() {
    $('body').toggleClass(this.className);
}

$('img[class]').hover(onHover);

注意：鼠标悬停时，使用单个函数触发悬停。

请查看下面的演示或此fiddle。

function onHover() {
	$('body').toggleClass(this.className);
}

$('img[class]').hover(onHover);

div {
    width: 200px;
    height: 200px;
    background-color: gray;
    margin: 10px;
}

.a {
    background-color: green;
}

.b {
    background-color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img class="a" src="https://placehold.it/300/300" />
<img class="b" src="https://placehold.it/300/300"/>

Answer 2

 <body>
   <img class="a img" data-class="a" src="images/a.jpg">
   <img class="b img img-big" data-class="b" src="images/b.jpg">

   <a href="#nogo" class="a btn btn-external" data-class="a">A link</a>
   <a href="#nogo" class="b btn btn-external" data-class="b">B link</a>
 </body>

$(document).ready(function(){
  $('[data-class]').hover(function(){
    $('body').addClass($(this).data('class'));
  },function(){
    $('body').removeClass($(this).data('class'));
  });
});

 .a { background: red; }
 .b { background-color: blue; }

我使用了数据类属性，因此只在主体上应用了所需的类。以防有多个类应用于悬停元素。

data-class属性可以应用于任何html标记。

Answer 3

this.className

这样的事情：

 $(document).ready(function(){
     $("img").mouseover(function(){
             $("body").addClass(this.className);    
           })
            .mouseout(function(){
               $("body").removeClass(this.className);
            });
     });

Answer 4

你可以从jQuery hover和一些循环中获得一些小的简化。

function bindListeners() {
  var selectors = ['a', 'b', 'c'];
  selectors.forEach(function (selector) {
    $('.' + selector).hover(function () {
      $('body').addClass(selector);
    }, function () {
      $('body').removeClass(selector);
    });
  });
}

$(document).ready(bindListeners);

简化冗余jquery的代码

4 个答案: