使用鼠标悬停来显示适用于链接的div [英] mouseover to display appropriated div for link

问题描述

我需要让每个div链接使相应的div文本出现在页面的底部。

 <脚本我已经部分设置了它，但我想知道是否有更好的方法来加密这段代码。类型= 文本/ JavaScript的 > 
 $（function（）{
 $（'＃item1'）。hover（
 function（）{
 $（'＃Tile1'）。fadeIn（'fast'） ; 
}，
 function（）{
 $（'＃Tile1'）。fadeOut（'fast'）; 
}）; 
}）; 
 
 $（'＃item2'）。hover（
 function（）{
 $（'＃Tile2'）。fadeIn（） 'fast'）; 
}，
 function（）{
 $（'＃Tile2'）。fadeOut（'fast'）; 
}）; 
} ）; 
< / script> 
< div class =four columns alpha> 
< a href =solutions / mobile.phpid =item1> 
< img src =images / 1.pngalt =class =tiles/>< / a> 
< / div> 
< div id =Tile1class =sixteen columnsstyle =display：none;> 
< h3 class =center> GIS / Mapping< / h3> 
< p> 
 Lorem ipsum dolor sit amet，consectetur adipiscing elit。 Maecenas id justo 
< / p> 
< / div> 
  

Div并不是嵌套的，因为我希望文本始终显示在页面底部您将鼠标悬停在哪个链接上。 $（function（）{...} doesn 对每个函数都不需要重复，并且可以使用 fadeToggle（）等函数来减少代码量：

  $（function（）{
 $（div [id ^ ='item']）。hover（function（）{
 var （'item'，''）; 
 $（selector）.fadeToggle（'fast'）; 
}选择器='#Tile'+ $（this）.attr ）; 
}）; 
  

假设您的ID总是格式为：<$标题（N）。

item（N）映射到第二行选择以 item 开头的所有元素，后面的行选择 item 后的ID并使用它选择适当的< div> 。

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.

解决方案

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

这篇关于使用鼠标悬停来显示适用于链接的div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！