如何编写带递增ID匹配的Jquery hover函数 避免重复编写冗余代码

你可以通过以下两种方式消除重复代码：

方案1：循环批量绑定事件 #

如果你的zone和对应项目节点的ID规则固定，直接用循环批量绑定即可，代码如下：

// 如果支持ES6+语法
for (let i = 1; i <= 4; i++) {
  $(`#zone-${i}`).hover(function() {
    $(`#projects-${i}`).addClass('visible');
  }, function() {
    $(`#projects-${i}`).removeClass('visible');
  });
}

// 如果需要兼容低版本JS环境，把模板字符串替换为普通字符串拼接即可
for (var i = 1; i <= 4; i++) {
  $('#zone-' + i).hover(function() {
    $('#projects-' + i).addClass('visible');
  }, function() {
    $('#projects-' + i).removeClass('visible');
  });
}

你甚至可以利用toggleClass方法进一步简化，因为hover的两个回调刚好是切换visible类的状态，代码可以压缩为：

for (let i = 1; i <= 4; i++) {
  $(`#zone-${i}`).hover(function() {
    $(`#projects-${i}`).toggleClass('visible');
  });
}

方案2：通用类绑定（更推荐） #

这种方案扩展性更好，后续新增对应元素不需要修改JS代码，只需要调整HTML属性即可：

1. 首先给所有的zone元素添加统一的类名，比如zone-trigger，同时新增data-target属性指定对应要控制的项目元素选择器，HTML示例：

<div id="zone-1" class="zone-trigger" data-target="#projects-1">区域1</div>
<div id="zone-2" class="zone-trigger" data-target="#projects-2">区域2</div>
<!-- 新增区域直接加对应属性即可，不用改JS -->

2. JS只需要写一次通用绑定逻辑：

$('.zone-trigger').hover(function() {
  $($(this).data('target')).toggleClass('visible');
});

内容的提问来源于stack exchange，提问作者SimonBak