Question

希望将我在这里的jQuery浓缩成几行，我知道它可以完成，但我似乎无法让它工作以查看其他帖子并围绕网络...

HTML

         <h2>Meet The Team</h2>
     <img src="img/1.png" id="team" class="team" />
     <img src="img/1.png" id="team1" class="team" />
     <img src="img/1.png" id="team2" class="team" />
     <img src="img/1.png" id="team3" class="team" />
     <img src="img/1.png" id="team4" class="team" />
     <img src="img/1.png" id="team5" class="team" />

     <div id="teamintro" class="teamintro">
         <h3>Matt</h3>
         <p>personal intro </p>
     </div>

    <div id="teamintro1" class="teamintro">
         <h3>Garrett</h3>
         <p> </p>
    </div>

    <div id="teamintro2" class="teamintro"> 
         <h3>Erik</h3>
         <p> </p>            
    </div>

    <div id="teamintro3" class="teamintro">
         <h3>Matt</h3>
         <p> </p>
    </div>

    <div id="teamintro4" class="teamintro"> 
         <h3>Chi</h3>
         <p> </p>
    </div>

    <div id="teamintro5" class="teamintro"> 
         <h3>Daemon</h3>
         <p> </p>
    </div>

的jQuery

<script>
    $(document).ready(function() {

        $('.teamintro').hide();

        $('#team').hover(function() {
            $('#teamintro').fadeIn(600);
        },
        function(){
            $('#teamintro').hide();
        });

         $('#team1').hover(function() {
                $('#teamintro1').fadeIn(600);
         },
             function(){
                $('#teamintro1').hide();
        });

         $('#team2').hover(function() {
                $('#teamintro2').fadeIn(600);
         },
             function(){
                $('#teamintro2').hide();
        });

         $('#team3').hover(function() {
                $('#teamintro3').fadeIn(600);
         },
             function(){
                $('#teamintro3').hide();
        });

         $('#team4').hover(function() {
                $('#teamintro4').fadeIn(600);
         },
             function(){
                $('#teamintro4').hide();
        });

         $('#team5').hover(function() {
                $('#teamintro5').fadeIn(600);
         },
             function(){
                $('#teamintro5').hide();
        });

    });


 </script>

所以当我将鼠标悬停在所述人的图像上时，我希望这样做可以显示人员信息。

Answer 1

jQuery将发生事件的DOM元素作为this传递给您的函数，这样您就可以轻松获取其id并使用它：

$('.team').hover(
    function() {
        var num = this.id.substring(4); // Remove the "team" prefix
        $('#teamintro' + num).fadeIn(600);
    },
    function(){
        var num = this.id.substring(4); // Remove the "team" prefix
        $('#teamintro' + num).hide();
    }
);

选择器.team将所有元素与team类匹配。在回调中，this是DOM元素，因此this.id是其id。 .substring(4)删除了team前缀。

冷凝jQuery脚本

1 个答案: