0

我需要让每个 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>

Div 没有嵌套，因为无论您将鼠标悬停在哪个链接上，我都希望文本始终出现在页面底部。

4

2 回答 2

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的行选择 ID 之后item并使用它来选择适当的<div>.

于 2013-02-22T16:24:15.977 回答
1

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

$(function () {
    $('[id^=item]').hover(function(){
        $(this).parent().next().fadeToggle();
    });
});
于 2013-02-22T16:27:33.563 回答