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

Question

如果我在多个页面节上都启用了悬停触发的效果，每个页面均具有.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>

谢谢！

Answer 1

您必须更改选择器以调整事件更改时悬停的当前元素。您可以通过将this.state = {bubbles: history} this.setState({ bubbles: this.state.bubbles.map(x => { // Option 1 - more verbose let newBubble = x; // or even let newBubble = {...x} newBubble.vy = x.vy + 1; // Option 2 - directly update x x.vy = x.vy + 1 // Then return x; })}) 更改为- system: processes executing in kernel mode

来进行调整

jQuery $("slide-active")将重点关注事件期间正在作用的当前元素。

$(this)

$(this)

jQuery(function($) {
  $(document).ready(function() {
    $('.slide-trigger').hover(function() {
        $(this).addClass('slide-active');
      },
      function() {
        $(this).removeClass('slide-active');
      });
  });
});

Answer 2

回调中的commands.getoutput关键字将引用触发事件的元素，因此您可以使用它仅将效果应用于该元素的子元素。

command='cat {}'.format(dir_log)
subprocess.getoutput([command])

Answer 3

尝试将触发事件的范围缩小到.slide元素。可以通过找到.slide元素的子项$(this)来完成：

jQuery(function($) {
  $(document).ready(function() {
    $('.slide-trigger').hover(function() {
        $(this).find('.slide').addClass('slide-active');
      },
      function() {
        $(this).find('.slide').removeClass('slide-active');
      });
  });
});

.slide-trigger {
  position: relative;
  margin: 1em 0;
  border: 1px solid;
  clear: both;
  height: 2em;
}

.slide-active {
  position: absolute;
  clear:both;
  left: 0;
  height: 100px;
  -webkit-animation: slide 0.5s forwards;
  -webkit-animation-delay: 2s;
  animation: slide 0.5s forwards;
  animation-delay: 0.5s;
  transition:1s
}

@-webkit-keyframes slide {
  100% {
    right: 100px;
  }
}

@keyframes slide {
  100% {
    left: 100px;
  }
}

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