javascript - 更改元素背景图像而不是 sibling

Question

所以我有一个问题，我确实知道解决方案，但在此过程中需要大量重复代码，所以我知道必须有一种更简单的方法来做到这一点。我有一个 div 列表，它们都有主图像和替代图像。替代图像隐藏在主图像后面，当用户将鼠标悬停在主图像上时，替代图像应该相互切换。每个 div 都有它自己的特定 ID，但我真的不想一遍又一遍地编写相同的脚本，只是更改 ID。这是我的 HTML(简化但结构相同但没有多余内容):

<section>
    <div id="one">
         <img src="#" class="main" />
         <img src="##" class="alt" style="display: none;" />
    </div>
    <div id="two">
         <img src="#" class="main" />
         <img src="##" class="alt" style="display: none;" />
    </div>
    <div id="three">
         <img src="#" class="main" />
         <img src="##" class="alt" style="display: none;" />
    </div>
</section>

以及我写的 jQuery:

<script type="text/javascript">
    $(document).ready(function () {
        $('#one img.main').mouseenter(function () {
            $('#one img.main').hide();
            $('#one img.alt').show();
        });
        $('#one img.alt').mouseleave(function () {
            $('#one img.alt').hide();
            $('#one img.main').show();
        });
    });
</script>

我真的不想重复每个 div，因为我当前页面中有 9 个。有什么建议么？

已解决:

jQuery(document).ready(function () {
        //swap out main images on hover
        jQuery('.stores div img.main').mouseenter(function () {
            jQuery(this).hide();
            jQuery(this).next('img.alt').show();
        });
        jQuery('.stores div').mouseleave(function () {
            jQuery('img.alt').hide();
            jQuery('img.main').show();
        });
    });

Answer 1

您应该能够将其减少到:

$(document).ready(function () {
    $('section > div > img.main').mouseenter(function () {
        $(this).hide();
        $(this).next('img.alt').show();
    });
    $('section > div > img.alt').mouseleave(function () {
        $(this).hide();
        $(this).prev('img.main').show();
    });
});