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()函数的帮助下为删除“悬浮”的类添加 delay 。

有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>