时间戳

首页 > 解决方案 > 如何将 jQuery 效果限制在特定页面部分内？

javascript - 如何将 jQuery 效果限制在特定页面部分内？

问题描述

如果我在多个页面部分上都有一个悬停触发的效果，每个部分都有如下 .slide-trigger 类，我如何将效果限制在现在悬停的部分？

我有以下代码，目前将鼠标悬停在一个触发器 div 上会将效果应用于所有 .slide 部分。

jQuery(function($) {
  $(document).ready(function() {
    $('.slide-trigger').hover(function() {
        $('.slide').addClass('slide-active');
      },
      function() {
        $('.slide').removeClass('slide-active');
      });
  });
});
<div class="slide-trigger">
  <div class="slide">
    <p>Slidey stuff</p>
  </div>
</div>

<div class="slide-trigger">
  <div class="slide">
    <p>More slidey stuff</p>
  </div>
</div>

谢谢！

标签： javascriptjquery

解决方案

您必须更改选择器以调整悬停在事件更改上的当前元素。您可以通过更改$("slide-active")为$(this)

JQuery$(this)将专注于在事件期间被操作的当前元素。

jQuery(function($) {
  $(document).ready(function() {
    $('.slide-trigger').hover(function() {
        $(this).addClass('slide-active');
      },
      function() {
        $(this).removeClass('slide-active');
      });
  });
});
.slide-active {
color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slide-trigger">
  <div class="slide">
    <p>Slidey stuff</p>
  </div>
</div>

<div class="slide-trigger">
  <div class="slide">
    <p>More slidey stuff</p>
  </div>
</div>

推荐阅读