Javascript 需要帮助更好地练习Jquery代码吗

我正在努力使我的jquery代码在这里看起来更好。我的函数工作正常，但我想知道是否有人能让我的代码不那么难看。非常感谢

HTML

<div class='image_layout'>
    <a href='#'><img src=' a.jpg '/></a> 
          <br><p class='credits'>hahahah 
          <br>Agency: Agency1
          <br>Picture ID: 5 </p> 
</div>

---

我会使用

.eq

而不是两个

next

语句，此外，hover有两个函数，第一个用于

mouseenter

事件，第二个用于

mouseout

$('#image_layout').hover('hover', 'img', function () {
    $(this).parent().eq(2).fadeIn('fast');
}, function () {
    $(this).parent().eq(2).fadeOut('fast');
})

参考资料

---

我将使用

.eq

而不是两个

next

语句，此外，hover具有两个功能，第一个用于

mouseenter

事件，第二个用于

mouseout

$('#image_layout').hover('hover', 'img', function () {
    $(this).parent().eq(2).fadeIn('fast');
}, function () {
    $(this).parent().eq(2).fadeOut('fast');
})

参考资料

你也可以这样做：

$('.image_layout').on('hover', 'img', function() {
    $(this).closest('.image_layout').find('.credits').stop().fadeIn('fast');
}, function() {
    $(this).closest('.image_layout').find('.credits').stop().fadeOut('fast');
});

如果您确信，除了悬停图像之外，没有其他任何东西会导致元素褪色，您可以简单地写下：

$('.image_layout').on('hover', 'img', function() {
    $(this).closest('.image_layout').find('.credits').stop().fadeToggle('fast');
});

你也可以这样做：

$('.image_layout').on('hover', 'img', function() {
    $(this).closest('.image_layout').find('.credits').stop().fadeIn('fast');
}, function() {
    $(this).closest('.image_layout').find('.credits').stop().fadeOut('fast');
});

如果您确信，除了悬停图像之外，没有其他任何东西会导致元素褪色，您可以简单地写下：

$('.image_layout').on('hover', 'img', function() {
    $(this).closest('.image_layout').find('.credits').stop().fadeToggle('fast');
});

---

您可以向jQuery hover传递两个函数——一个用于mousein，一个用于mouseout。只要没有动态添加的图像，就可以进行此更改。如果正在淡入淡出的元素具有ID或类，则代码也会简单得多：

$('#image_layout img').hover(
    function () {
        $(this).closest('.someClass').fadeIn('fast');
    },
    function () {
        $(this).closest('.someClass').fadeOut('fast');
    }
);

---

您可以向jQuery hover传递两个函数——一个用于mousein，一个用于mouseout。只要没有动态添加的图像，就可以进行此更改。如果正在淡入淡出的元素具有ID或类，则代码也会简单得多：

$('#image_layout img').hover(
    function () {
        $(this).closest('.someClass').fadeIn('fast');
    },
    function () {
        $(this).closest('.someClass').fadeOut('fast');
    }
);

调查。他会让你的代码看起来像（经过改进）：

您不需要上的

，只需直接调用该函数。
查看。他会让你的代码看起来像（经过改进）：

您不需要
on
，只需直接调用该函数。
您不能将两个回调函数传递给
on（）
，只有
hover（）
可以这样做。您不能将两个回调函数传递给
on（）
，只有
hover（）
可以这样做。