jQuery - 悬停和if语句

Posted 2021-04-06

我正在尝试运行悬停，但仅当给定元素具有某个类时。

例如：

jQuery的

$("#banner").hover(
  if ($(this).hasClass("bannerReady")) {
  function() {
    runOne();
  },
    function() {
      runTwo();
    }
}
);

但这不起作用。

我已经尝试过这样使用它，这会起作用，但是jQuery不会意识到同时更改了类名，它仍将继续工作：

if ($(this).hasClass("bannerReady")) {
  $("#banner").hover(

    function() {
      runOne();
    },
      function() {
        runTwo();
      }
  );
}

答案

.hover()希望收到两个函数，所以你不能将if语句传递给它。像这样改变它：

$("#banner").hover( function() {
      if ( $("#banner").hasClass("bannerReady") ) runOne();
  }, function() {
      runTwo();
  }
});

另一答案

hover()只是一个添加mouseenter和mouseleave处理程序的包装方法。

https://api.jquery.com/hover/

委托允许我们将事件附加到页面上当前不存在的选择器。

https://learn.jquery.com/events/event-delegation/

$('body').on('mouseenter', '#banner.bannerReady', runOne);
$('body').on('mouseleave', '#banner.bannerReady', runTwo);

通过将事件附加到正文（始终存在）并让它委托给#banner.bannerReady选择器，您可以在页面加载的第二个事件中附加事件，并仅在横幅实际匹配选择器时运行它们。

如果横幅所在的选择器更具体，则可以使用该选择器代替body。