jQuery定时切换image-part元素CSS visibility属性无效果求助

嘿，我帮你找到了问题所在——你的脚本里定时器回调函数的this指向出错了！

先看你原来的代码逻辑：在$('.image-part').each()循环里，frame函数是通过setInterval调用的，这时候frame里的this不再指向当前遍历的.image-part元素，而是指向全局的window对象，所以$(this)根本找不到你要操作的DOM元素，自然看不到任何动画效果。

解决方案1：保存元素引用修复指向 #

最简单的修复方式是在each循环里先把当前元素的引用存起来，然后在frame函数里用这个变量操作：

$(document).ready(function() {
  $('.image-part').each(function() {
    // 把当前元素的jQuery对象存到变量里，固定指向
    var $currentPart = $(this);
    var timerId = setInterval(frame, 3000);
    
    function frame() {
      // 用保存好的变量操作元素，而不是依赖this
      if ($currentPart.css("visibility") === "hidden") {
        $currentPart.css("visibility", "visible");
      } else {
        $currentPart.css("visibility", "hidden");
      }
    }
  });
});

解决方案2：用类切换简化代码（更推荐） #

如果想让代码更简洁易维护，推荐用CSS类来控制可见性，再结合jQuery的toggleClass方法，避免手动判断样式状态：

首先修改CSS，新增一个控制隐藏的类：

.image-part {
  width: 33.33%;
  height: 60px;
  background-color: black;
  float: left;
}
/* 新增专门控制隐藏的类 */
.image-part.hidden {
  visibility: hidden;
}

然后调整HTML，把内联样式换成语义化的类：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="image-part hidden"></div>
<div class="image-part"></div>
<div class="image-part"></div>
<div class="image-part"></div>

最后简化脚本：

$(document).ready(function() {
  $('.image-part').each(function() {
    var $currentPart = $(this);
    setInterval(function() {
      // 直接切换hidden类，无需手动判断状态
      $currentPart.toggleClass('hidden');
    }, 3000);
  });
});

这样不仅代码更清晰，后续维护样式或调整逻辑也更方便。

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