jquery - 需要优化 jQuery 中隐藏和显示 div 的代码

Question

我有一个 div:

<div id="p1" class="img-projects" style="margin-left:0;">
  <a href="project1.php"> <img src="image1.png"/></a>
  <div id="p1" class="project-title">Bar Crawler</div>
</div>

当鼠标悬停时，我想添加不透明的图像并显示项目标题。所以我使用这段代码:

<script type="text/javascript">
    $(function() {
        $('.project-title').hide();

            $('#p1.img-projects img').mouseover(
               function() {
                   $(this).stop().animate({ opacity: 0.3 }, 800);
                   $('#p1.project-title').fadeIn(500);
            });
            $('#p1.img-projects img').mouseout(
               function() {
                   $(this).stop().animate({ opacity: 1.0 }, 800);
                   $('#p1.project-title').fadeOut();
            });


            $('#p2.img-projects img').mouseover(
               function() {
                   $(this).stop().animate({ opacity: 0.3 }, 800);
                   $('#p2.project-title').fadeIn(500);
            });
            $('#p2.img-projects img').mouseout(
               function() {
                   $(this).stop().animate({ opacity: 1.0 }, 800);
                   $('#p2.project-title').fadeOut();
            });

    });

</script>

代码工作正常，但有人知道优化我的代码的方法吗？

谢谢

Answer 1

您可以使用一个.hover()函数适用于所有相对的、不依赖 ID 的东西，如下所示:

$('.img-projects img').hover(function() {
   $(this).stop().animate({ opacity: 0.3 }, 800)
          .closest('.img-projects').find('.project-title').fadeIn(500);
}, function() {
   $(this).stop().animate({ opacity: 1.0 }, 800)
          .closest('.img-projects').find('.project-title').fadeOut();
});

这会找到与悬停的元素相关的所有元素，而不是使用不同的函数来处理每个元素...您也可以从元素中删除 ID，除非它们有其他用途。由于当前您的 HTML 无效且 ID 每次使用两次，这也可以解决该问题。