Question

我有以下脚本在悬停时向元素添加一个类。

对于JS来说，我是一个新手，所以从下面的代码可以看出，我为每个ID使用了相同的脚本。我确信必须有一种方法可以在脚本上执行相同的工作。

我为每个脚本编写单独脚本的原因是因为我的原始脚本会添加＆＃34; .slidein＆＃34;每个＆＃34; #project-box＆＃34;而不仅仅是那个被盘旋的那个。

剧本

<script>

$("#project-box-one")
.mouseenter(function(){
$(".project-overlay-one").addClass("slidein");
})
.mouseleave(function(){
$(".project-overlay-one").removeClass("slidein");
});


$("#project-box-two")
.mouseenter(function(){
$(".project-overlay-two").addClass("slidein");
})
.mouseleave(function(){
$(".project-overlay-two").removeClass("slidein");
});


$("#project-box-three")
.mouseenter(function(){
$(".project-overlay-three").addClass("slidein");
})
.mouseleave(function(){
$(".project-overlay-three").removeClass("slidein");
});

</script>

＆＃34;项目框的HTML示例＆＃34;

<div id="project-box-one">
    <div class="project-overlay-one">
          <h1>Chy an Albany Hotel</h1>
          <a href="#" class="project-link">view project</a>
    </div>
         <a href="#">
         <img src="img/portfolio/thumbs/chy-an-albany.jpg" width="300" height="310">
         </a>
</div>

CSS＆＃34;

.project-box {
      width: 33.3333%;
      position: relative;
      padding-left: 0.9375em;
      padding-right: 0.9375em;
      float: left;
      height: 310px;
      overflow: hidden;
 }

 #project-box-one, #project-box-two, #project-box-three {
      width: 33.3333%;
  position: relative;
  padding-left: 0.9375em;
  padding-right: 0.9375em;
  float: left;
  height: 310px;
  overflow: hidden;
  }

  .project-overlay.slidein, 
  .project-overlay-one.slidein, 
  .project-overlay-two.slidein, 
  .project-overlay-three.slidein {
      transition: 600ms ease-in;
  top: -340px;
   }

Answer 1

因为你不需要ID：

使用.project-box类而不是#project-box-xxx ids
使用.project-overlay类而不是#project-overlay-xxx ids
使用这些类而不是多个ID来推广您的JS / CSS
（奖金）使用jQuery hover()函数代替mouseenter()和mouseleave()

<script>
/* Thanks to cookie_monster for the toggleClass shortcut */
$('.project-box')               // for each .project-box
  .hover(                       // on each mouseenter AND mouseleave event
    function(e){                // run this anonymous function
      $(this).toggleClass(      // get hovered element, and add/remove a class
        'slidein',              // this class is .slidein
        e.type === "mouseenter" // if event type is mouseenter we add the class, else, we remove it
      ); 
    }
  );    
</script>

<div class="project-box">
    <div class="project-overlay">
          <h1>Chy an Albany Hotel</h1>
          <a href="#" class="project-link">view project</a>
    </div>
    <a href="#">
         <img src="img/portfolio/thumbs/chy-an-albany.jpg" width="300" height="310">
    </a>
</div>

.project-box {
      width: 33.3333%;
      position: relative;
      padding-left: 0.9375em;
      padding-right: 0.9375em;
      float: left;
      height: 310px;
      overflow: hidden;
}
.project-overlay.slidein {
    transition: 600ms ease-in;
    top: -340px;
}

Answer 2

<强> HTML

<!-- add class="project-box" to each div -->
<div id="project-box-one" class="project-box">
    <div class="project-overlay-one">
        <h1>Chy an Albany Hotel</h1>
        <a href="#" class="project-link">view project</a>
    </div>
    <a href="#">
        <img src="img/portfolio/thumbs/chy-an-albany.jpg" width="300" height="310">
    </a>
</div>

<强>的jQuery

// use the class selector, and add and remove the classes on the specific instance of that class
$(".project-box").mouseenter(function(){
    // $(this).addClass("slidein");
    // just noticed this line is wrong, an alternative to @zessx's would be the following:
    $(this).children('.project-overlay').addClass('slidein');
})
.mouseleave(function(){
    // $(this).removeClass("slidein");
    // just noticed this line is wrong, an alternative to @zessx's would be the following:
    $(this).children('.project-overlay').removeClass('slidein');
});

<强> CSS

/* #project-box-one, #project-box-two, #project-box-three { */
.project-box {

TLDR：使用class es代替id＆＃39;

这个脚本更好（更短）的解决方案？

2 个答案: