使用每种方法独立显示各个元素 [英] show individual elements independently using each method

问题描述

试图一次只显示一个元素使用每个函数，但不知道如何获得与第一个项目相关的匹配项目，以便您将鼠标悬停在第一个hoverMe上时，它只显示第一个showMe等等。

这是迄今为止我所知道的，我认为我可以做到这一点非常混乱，但不知道是否有干净的方式来做到这一点。

http://jsfiddle.net/Pm2vP/

 < p class =hoverMe>将鼠标悬停在< span class =showMe>显示我< / span>< / p> 
< p class =hoverMe>将鼠标悬停在< span class =showMe>显示我< / span>< / p> 
< p class =hoverMe>将鼠标悬停在< span class =showMe>显示我< / span>< / p> 
 
 $（'。showMe'）。hide（）; 
 
 $（。hoverMe）。each（function（）{
 $（this）.hover（
 function（）{
 $（。showMe ）.fadeIn（）; 
}，
 function（）{
 $（。showMe）。fadeOut（）; 
} 
）; 
}）; 
  

解决方案

this 关键字将引用函数内的当前悬停元素，并将其用作选择器中的上下文，只能选择当前悬停段落内的跨度。

.hover（）是 .on（'mouseenter mouseleave'>的快捷方式，我发现它更容易使用直接和 fadeToggle（）会切换淡化效果。

  $（'。showMe'）。hide（）; 
 
 $（。hoverMe）。（'mouseenter mouseleave'，function（）{
 $（。showMe， this）.fadeToggle（）; 
}）; 
  

FIDDLE

编辑：

为了确保褪色切换正确（很少出现问题），您可以创建自己的切换功能：

  $（'。showMe'）。hide（）; 
 $ b $（'。showMe'，this）[e.type =='mouseenter'？'fadeIn'：'（'mouseenter mouseleave'，function（e）{
 $（。showMe消退']（）; 
}）; 
  

trying to show only one element at a time using each function, but not sure how to get matching item associated with first item so as you hover over first "hoverMe" it shows only first showMe and so on

here is what I have so far, I think I can do this a really messy way, but not sure if there is a clean way to do it.

http://jsfiddle.net/Pm2vP/

<p class="hoverMe">Hover me<span class="showMe">show me</span></p>
<p class="hoverMe">Hover me<span class="showMe">show me</span></p>
<p class="hoverMe">Hover me<span class="showMe">show me</span></p>

$('.showMe').hide();

$(".hoverMe").each(function(){
  $(this).hover(
    function () {
      $(".showMe").fadeIn();
    },
    function () {
      $(".showMe").fadeOut();
    }
  );
});

解决方案

The this keyword will reference the currently hovered element inside the function, and using it as context in the selector, you can select only the spans inside the currently hovered paragraph.

.hover() is a shortcut for .on('mouseenter mouseleave', and I find it easier just using that directly, and fadeToggle() will toggle the fading effect.

$('.showMe').hide();

$(".hoverMe").on('mouseenter mouseleave', function() {
      $(".showMe", this).fadeToggle();
});

FIDDLE

EDIT:

To make sure the fading toggle's correctly (which rarely is a problem), you can create your own toggle functionality:

$('.showMe').hide();

$(".hoverMe").on('mouseenter mouseleave', function(e) {
      $(".showMe", this)[e.type=='mouseenter'?'fadeIn':'fadeOut']();
});

这篇关于使用每种方法独立显示各个元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！