如何去除jQuery中.hover代码冗余并封装颜色切换函数？

当然可以！咱们完全能通过封装复用的hover交互逻辑来消除两处重复代码，还能顺便修复原代码里全局变量带来的潜在bug（比如多个盒子同时hover时，样式会互相串的问题）。下面是具体的改造思路和最终代码：

第一步：封装通用的颜色切换逻辑 #

因为每个盒子的原始背景色和透明度都是独立的，咱们不用全局变量来存，而是把每个盒子的原始样式存在自己的data()属性里，这样就不会互相干扰了。然后封装两个复用的回调函数，分别处理鼠标进入和离开的逻辑：

// 处理鼠标进入盒子时的样式切换
function handleBoxMouseEnter() {
  // 把当前盒子的原始样式存在自身的data属性中
  $(this).data({
    originColor: $(this).css("background-color"),
    originOpacity: $(this).css("opacity")
  });
  // 切换到高亮样式
  $(this).css({
    "background-color": "#ffffff",
    "opacity": "1"
  });
}

// 处理鼠标离开盒子时的样式恢复
function handleBoxMouseLeave() {
  // 从自身data属性取出原始样式并恢复
  $(this).css({
    "background-color": $(this).data("originColor"),
    "opacity": $(this).data("originOpacity")
  });
}

第二步：改造原函数，调用封装好的逻辑 #

现在咱们可以把first4boxes和createBox里重复的hover代码删掉，直接调用上面封装好的函数：

改造后的first4boxes函数

$(document).ready(function first4boxes() {
  var firstboxes = 0;
  while (firstboxes < 4) {
    $(".right_side_lay3")
      .append("<div></div>")
      .find("div:last")
      .css("opacity", Math.random())
      // 直接绑定封装好的hover回调
      .hover(handleBoxMouseEnter, handleBoxMouseLeave);
    firstboxes++;
  }
});

改造后的createBox函数

function createBox(boxCount, firstCheck) {
  $(".button").on("click", function() {
    if ((boxCount % 5) == 0) {
      if (firstCheck == 1) {
        firstCheck = 0;
      } else {
        $(".main_lay3").css("height", "+=250");
      }
      boxCount = 1;
    }
    $(".main_lay3")
      .append("<div></div>")
      .find("div:last")
      .css("opacity", Math.random())
      // 同样绑定封装好的hover回调
      .hover(handleBoxMouseEnter, handleBoxMouseLeave);
    boxCount++;
  });
}

改造后的初始化代码

原来的全局变量originColor和originOpacity已经不需要了，所以可以删掉：

$(document).ready(function() {
  var upperBox = $(".right_side_lay3 div")
  var boxCount = 1;
  var firstCheck = 1;
  createBox(boxCount, firstCheck);
});

改造后的好处 #

• 消除代码重复：后续如果要修改hover的样式（比如把白色改成其他颜色，或者调整透明度），只需要修改封装的函数即可，不用在两个地方重复修改
• 修复潜在bug：用每个盒子自身的data属性存储原始样式，避免了全局变量导致的样式串用问题
• 代码更清晰：职责划分明确，封装的函数只负责hover的样式逻辑，创建盒子的函数只负责创建元素和绑定事件

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