Как применять функцию только к текущему элементу?

189

27 апреля 2018, 13:38

Есть скрытый блок у 10 товаров (лежат в li).

HTML:

<li>
<img src="">
<p class="price">8999</p>
<p class="tooltip-beauty">show beauty box</p>
<span class="short">
    <div class="tooltip-beauty-box">Some Text</div>
</span> 
</li>
<li>
<img src="">
<p class="price">8999</p>
<p class="tooltip-beauty">show beauty box</p>
<span class="short">
    <div class="tooltip-beauty-box">Some Text</div>
</span> 
</li>
<li>
<img src="">
<p class="price">8999</p>
<p class="tooltip-beauty">show beauty box</p>
<span class="short">
    <div class="tooltip-beauty-box">Some Text</div>
</span> 
</li>

jQuery:

jQuery(function($){
    $('.tooltip-beauty').hover(
    function(){
        $('.tooltip-beauty-box').fadeIn();
        //console.log(list);
    },
    function(){
        $('.tooltip-beauty-box').fadeOut();
    });
});

Логично, что сейчас при наведении на кнопку блок всплывает у всех элементов, в которых он присутствует. Нужно, чтобы появлялся только на текущем (как hover в сss).

Answer 1

Вы в функциях используете селектор, а с this мы будем показывать и скрывать только те tooltip-beauty-box которые находятся рядом с элементом на который вы навели

$(function($){ 
 
  $('.tooltip-beauty').hover( 
   function(){ 
      element = $(this).parent().find('.tooltip-beauty-box'); 
      if(element.css('display') != 'block'){ 
        element.fadeIn(); 
      } 
   }, 
   function(){ 
      element = $(this).parent().find('.tooltip-beauty-box'); 
      if(element.css('display') != 'none'){ 
        element.fadeOut(); 
      } 
   }); 
});

.tooltip-beauty-box{ 
display: none; 
} 
 
.tooltip-beauty{ 
background: gray; 
padding: 10px; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<li> 
<img src=""> 
<p class="price">8999</p> 
<p class="tooltip-beauty">show beauty box</p> 
<span class="short"> 
    <div class="tooltip-beauty-box">Some Text</div> 
</span>  
</li> 
 
<li> 
<img src=""> 
<p class="price">8999</p> 
<p class="tooltip-beauty">show beauty box</p> 
<span class="short"> 
    <div class="tooltip-beauty-box">Some Text</div> 
</span>  
</li> 
 
<li> 
<img src=""> 
<p class="price">8999</p> 
<p class="tooltip-beauty">show beauty box</p> 
<span class="short"> 
    <div class="tooltip-beauty-box">Some Text</div> 
</span>  
</li>

Добавил небольшую проверку, что бы элемент не моргал при частом срабатывании события hover

Answer 2

jQuery(function($){ 
 
    $('.tooltip-beauty').hover( 
    function(){ 
       $(this).next().find('.tooltip-beauty-box').fadeIn(); 
        //console.log(list); 
    }, 
 
    function(){ 
       $(this).next().find('.tooltip-beauty-box').fadeOut(); 
 
    }); 
});

.tooltip-beauty-box{ 
display:none; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> 
<ul> 
<li> 
<img src=""> 
<p class="price">8999</p> 
<p class="tooltip-beauty">show beauty box</p> 
<span class="short"> 
    <div class="tooltip-beauty-box">Some Text</div> 
</span>  
</li> 
 
<li> 
<img src=""> 
<p class="price">8999</p> 
<p class="tooltip-beauty">show beauty box</p> 
<span class="short"> 
    <div class="tooltip-beauty-box">Some Text</div> 
</span>  
</li> 
 
<li> 
<img src=""> 
<p class="price">8999</p> 
<p class="tooltip-beauty">show beauty box</p> 
<span class="short"> 
    <div class="tooltip-beauty-box">Some Text</div> 
</span>  
</li> 
</ul>