javascript - jQuery：用于延迟 removeClass() 的脚本延迟太久

Question

我有一个产品网格。有些产品有“附赠”的礼物。

$('.icon').hover(function() {
  $(this).closest('.product-box').addClass("hovered");
}, function() {
  setTimeout(function() {
    $(this).closest('.product-box').removeClass("hovered");
  }, 1000);
});

.product-box {
  position: relative;
  margin-top: 10px;
  background: #fff;
  border: 1px solid #ccc;
  padding: 10px;
}
.product-box .icon {
  cursor: pointer;
  position: absolute;
  top: 4px;
  right: 7px;
}
.product-box h3 {
  margin: 0;
}
.product-box .price {
  font-weight: bold;
  padding-bottom: 5px;
}
.product-box .gift {
  border: 1px solid #ddd;
  background: #fff;
  width: 100px;
  position: absolute;
  left: 101%;
  z-index: 99;
  display: none;
}
.product-box .gift p {
  margin: 0;
}
.product-box .gift img {
  max-width: 100%;
}
.product-box.hovered .gift {
  display: block;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

<div class="container">
  <div class="col-xs-6 col-sm-4 col-md-3">
    <div class="product-box">
      <h3 class="product-name text-center">Lorem</h3>
      <div class="product-image">
        <img src="//lorempixel.com/200/200" />
      </div>
      <div class="price text-center">$100</div>
      <div class="text-center"><a href="#" class="btn btn-xs btn-success">Add to cart</a></div>
    </div>
  </div>

  <div class="col-xs-6 col-sm-4 col-md-3">
    <div class="product-box">
      <span class="icon"><i class="fa fa-gift" aria-hidden="true"></i></span>
      <div class="gift">
        <p>Gift</p>
        <img src="//lorempixel.com/100/100" />
      </div>
      <h3 class="product-name text-center">Lorem</h3>
      <div class="product-image">
        <img src="//lorempixel.com/200/200" />
      </div>
      <div class="price text-center">$100</div>
      <div class="text-center"><a href="#" class="btn btn-xs btn-success">Add to cart</a></div>
    </div>
  </div>

  <div class="col-xs-6 col-sm-4 col-md-3">
    <div class="product-box">
      <h3 class="product-name text-center">Lorem</h3>
      <div class="product-image">
        <img src="//lorempixel.com/200/200" />
      </div>
      <div class="price text-center">$100</div>
      <div class="text-center"><a href="#" class="btn btn-xs btn-success">Add to cart</a></div>
    </div>
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

当我将鼠标悬停在礼物图标上时，会出现一个带有礼物详细信息的框，因为产品框添加了来自 jQuery 的“悬停”类。

在没有 jQuery 帮助的情况下，如果用户想要点击礼品盒，它不会停留足够长的时间以被点击。

所以我试图在函数的帮助下延迟“悬停”类的删除。setTimeout()

有2个问题：

1. 鼠标悬停时礼品盒不会消失。
2. 只要悬停，礼品盒就应该一直存在。

我哪里错了？

Answer 1

$('.icon').hover(function() {
  let productBox = $(this).closest('.product-box');
  productBox.addClass("hovered");
}, function() {
  let productBox = $(this).closest('.product-box');
  setTimeout(function() { 
    productBox.removeClass("hovered");
  }, 1000);
});

Answer 2

this你的setTimeout回调有问题

$('.icon').hover(function() {
  $(this).closest('.product-box').addClass("hovered");
}, function() {
  var self = this; // create variable that holds `this` reference from this scope
  setTimeout(function() {
    // use self instead of this
    $(self).closest('.product-box').removeClass("hovered");
  }, 1000);
});

$('.icon').hover(function() {
  $(this).closest('.product-box').addClass("hovered");
}, function() {
  var self = this;
  setTimeout(function() {
    $(self).closest('.product-box').removeClass("hovered");
  }, 1000);
});

.product-box {
  position: relative;
  margin-top: 10px;
  background: #fff;
  border: 1px solid #ccc;
  padding: 10px;
}
.product-box .icon {
  cursor: pointer;
  position: absolute;
  top: 4px;
  right: 7px;
}
.product-box h3 {
  margin: 0;
}
.product-box .price {
  font-weight: bold;
  padding-bottom: 5px;
}
.product-box .gift {
  border: 1px solid #ddd;
  background: #fff;
  width: 100px;
  position: absolute;
  left: 101%;
  z-index: 99;
  display: none;
}
.product-box .gift p {
  margin: 0;
}
.product-box .gift img {
  max-width: 100%;
}
.product-box.hovered .gift {
  display: block;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

<div class="container">
  <div class="col-xs-6 col-sm-4 col-md-3">
    <div class="product-box">
      <h3 class="product-name text-center">Lorem</h3>
      <div class="product-image">
        <img src="//lorempixel.com/200/200" />
      </div>
      <div class="price text-center">$100</div>
      <div class="text-center"><a href="#" class="btn btn-xs btn-success">Add to cart</a></div>
    </div>
  </div>

  <div class="col-xs-6 col-sm-4 col-md-3">
    <div class="product-box">
      <span class="icon"><i class="fa fa-gift" aria-hidden="true"></i></span>
      <div class="gift">
        <p>Gift</p>
        <img src="//lorempixel.com/100/100" />
      </div>
      <h3 class="product-name text-center">Lorem</h3>
      <div class="product-image">
        <img src="//lorempixel.com/200/200" />
      </div>
      <div class="price text-center">$100</div>
      <div class="text-center"><a href="#" class="btn btn-xs btn-success">Add to cart</a></div>
    </div>
  </div>

  <div class="col-xs-6 col-sm-4 col-md-3">
    <div class="product-box">
      <h3 class="product-name text-center">Lorem</h3>
      <div class="product-image">
        <img src="//lorempixel.com/200/200" />
      </div>
      <div class="price text-center">$100</div>
      <div class="text-center"><a href="#" class="btn btn-xs btn-success">Add to cart</a></div>
    </div>
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>