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

正しく理解できれば。divの<div>横にコンテンツを表示したい。<a>あなたが試すことができます。

$(function () {
    $('[id^=item]').hover(function(){
        $(this).parent().next().fadeToggle();
    });
});
于 2013-02-22T16:27:33.563 に答える
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)。

2 行目は ID が で始まるすべての要素をitem選択し、次の行は IDitemを選択し、それを使用して適切な を選択します<div>。

于 2013-02-22T16:24:15.977 に答える