Правильное испоьлзоване jQuery Object

178

10 ноября 2018, 20:30

Есть 3 объекта $('.ground') и 3 объекта $('.tip') Надо, чтобы при наведении на $('.ground') i-тый высплывал $('.tip') i-тый

Через jQuery Object не получается 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/

Answer 1

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

Answer 2

Рекомендовал бы обратить внимание все таки на возможности css3 в частности вы можете более прозрачнее описать данную задачу всего лишь используя :hover и transition В любом случае почитайте вот тут - https://developer.mozilla.org/ru/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions это интересно. Да и стоит ли использовать jquery если браузеры нативно поддерживают множество интересных штуковин.

Хочу показаться грубым, но то как хотите вы решить задачу, похоже на костыли.

Answer 3

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");
    })
}