javascript - 分别使用 jQuery 将 jQuery 悬停应用于多个元素

Question

我正在努力使以下工作正常进行，以便使用 jQuery 使页面的某些元素在悬停时显示其他元素。我正在尝试使用悬停元素的数据属性来选择显示的元素。

我似乎无法正常工作。或者有更好的方法吗？

function setUpServiceHover(){
 $( ".poster-banners__poster" ).each(function(i) {
  $(this).hover(
   function () {
    $("#service_" + ($(this).data('target')).addClass('intro__service--show'));
    $("#service_" + ($(this).data('target')).removeClass('intro__service--hidden'));
  },
   function () {
    $("#service_" + ($(this).data('target')).addClass('intro__service--hidden'));
    $("#service_" + ($(this).data('target')).removeClass('intro__service--show'));
  })
 });
}

setUpServiceHover();

感谢您的帮助。

谢谢。

Answer 1

悬停效果不需要迭代，只需如下所示添加悬停事件处理程序

注意:您不需要将此脚本放在setUpServiceHover() 函数中并删除此函数。您需要将其放入 document.ready.. 或 $(function().. 以确保加载 DOM。

$(function(){
   $(".poster-banners__poster").on("hover",
       function () {
        $("#service_" + ($(this).data('target')).addClass('intro__service--show'));
        $("#service_" + ($(this).data('target')).removeClass('intro__service--hidden'));
      },
       function () {
        $("#service_" + ($(this).data('target')).addClass('intro__service--hidden'));
        $("#service_" + ($(this).data('target')).removeClass('intro__service--show'));
      });
  });