mouseover to display appropriated div for link

问题:

I need to have each div link make the appropriate div text to appear at the bottom of the page. I have it partially set up but I wanted to know if there was a better way to steam line this code.

 <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>

The Divs are not nested because I want the text to always appear at the bottom of the page no matter which link you hover over.

回答1:

The $(function(){ ... } doesn't need to be repeated for each function, and you can use functions such as fadeToggle() to reduce the amount of code:

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

This assumes your IDs are always in the format: item(N) maps to Title(N).

The second line selects all elements where the ID begins with item and the line that follows selects the ID after item and uses it to select the appropriate <div>.

回答2:

If I understand it correctly. you want to show the <div> content next to <a> div. you can try.

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