主页 / 问题 / 870390
Accepted
Natalya
Asked:2020-08-19 02:20:23 +0000 UTC2020-08-19 02:20:23 +0000 UTC

正确使用 jQuery 对象

  • 772

有 3 个 $('.ground') 和 3 个 $('.tip') 对象

无法通过 jQuery 对象 https://learn.jquery.com/using-jquery-core/jquery-object/ 

    <div class='ground'>red</div>
    <div class='ground'>green</div>
    <div class='ground'>blue</div>
    <div class='tip' style="background-color:red;"></div>  
    <div class='tip' style="background-color:green;"></div> 
    <div class='tip' style="background-color:blue;"></div>

   <script> 
    var gruond = $('.ground');

     for (i=0; i<=gruond.length; i++) {
            gruond[i].mouseenter(function(){ 
                $('.tip')[i].fadeIn("slow");
            })      

            gruond[i].mouseleave(function(){ 
                $('.tip')[i].fadeOut("slow");
            })
    }

</script>

这里有什么问题？ http://jsfiddle.net/Nata_Hamster/tcf43p96/

jquery

3 个回答

  1. 我建议您注意 css3 的可能性，特别是，您可以更透明地描述此任务， :hover并且transition 无论如何，请在此处阅读 - https://developer.mozilla.org/ru/docs/Web/CSS/CSS_Transitions /Using_CSS_transitions 很有趣。如果浏览器本身支持很多有趣的小玩意，那么是否值得使用 jquery。

    我想显得粗鲁，但你想解决问题的方式就像拐杖。

    • 2

  2. 循环中的 gruond[i] 不是 jQuery 对象。您可以将它转换为像这样的 jQuery 对象 - $(ground[i​​])。另外 $('.tip')[i] 不是 jQuery 对象， $($('.tip')[i])

    完整代码：

    var gruond = $('.ground');
var tip = $('.tip');

for (let i=0; i<=gruond.length; i++) {
    $(gruond[i]).mouseenter(function(){ 
        $(tip[i]).fadeIn("slow"); // или $($('.tip')[i]).fadeIn("slow");
    })

    $(gruond[i]).mouseleave(function(){ 
        $(tip[i]).fadeOut("slow");
    })
}
    • 1
  3. Best Answer

    $(function(){
var gruond = $('.ground');

		$('.ground').mouseenter(function(){ 
    	var i = $(this).index('.ground');
		    $('.tip:eq('+ i +')').fadeIn("slow");
		})		

		$('.ground').mouseleave(function(){ 
      var i = $(this).index('.ground');
		    $('.tip:eq('+ i +')').fadeOut("slow");
		})
 })
    .ground{
    cursor:pointer;
    width:100px;
    height:50px;
}

.tip{    
    width:150px;
    height:50px;
    display:none;
    position:absolute;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='ground'>red</div>
<div class='ground'>green</div>
<div class='ground'>blue</div>
<div class='tip' style="background-color:red;"></div>  
<div class='tip' style="background-color:green;"></div> 
<div class='tip' style="background-color:blue;"></div>

    • 0

相关问题