Question

我需要让每个div链接在页面底部显示相应的div文本。我已经部分设置了但我想知道是否有更好的方法来对此代码进行预测。

 <script type="text/javascript">
    $(function () {
        $('#item1').hover(
        function () {
            $('#Tile1').fadeIn( 'fast' );
        }, 
        function () {
            $('#Tile1').fadeOut( 'fast' );
        });
    });

    $(function () {
        $('#item2').hover(
        function () {
            $('#Tile2').fadeIn( 'fast' );
        },
        function () {
            $('#Tile2').fadeOut( 'fast' );
        });
    });
</script>
 <div class="four columns alpha">
     <a href="solutions/mobile.php" id="item1">
     <img src="images/1.png" alt="" class="tiles" /></a>
 </div>
 <div id="Tile1" class=" sixteen columns" style="display: none;">
     <h3 class="center">GIS / Mapping</h3>
     <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas id justo 
     </p>
</div>

Divs不是嵌套的，因为无论您将鼠标悬停在哪个链接上，我都希望文本始终显示在页面底部。

Answer 1

不需要为每个函数重复$(function(){ ... }，您可以使用fadeToggle()等函数来减少代码量：

$(function () {
    $("div[id^='item']").hover(function(){
        var selector = '#Tile' + $(this).attr('id').replace('item', '');
        $(selector).fadeToggle('fast');
    });
});

这假设您的ID始终采用以下格式：item(N)映射到Title(N)。

第二行选择ID以item开头的所有元素，后面的行选择item之后的ID，并使用它来选择相应的<div>。

Answer 2

如果我理解正确的话。您想要在<div> div旁边显示<a>内容。你可以试试。

$(function () {
    $('[id^=item]').hover(function(){
        $(this).parent().next().fadeToggle();
    });
});

mouseover显示适用于链接的div

2 个答案: