jquery - 使用每种方法独立显示单个元素

Question

尝试使用每个函数一次仅显示一个元素，但不确定如何获取与第一个项目关联的匹配项目，以便将鼠标悬停在第一个“hoverMe”上时它只显示第一个 showMe 等等

这是我到目前为止所拥有的，我想我可以用一种非常混乱的方式来做到这一点，但不确定是否有一种干净的方式来做到这一点。

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

score 1 · Accepted Answer

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

.hover()是的快捷方式.on('mouseenter mouseleave'，我发现直接使用它更容易，并且fadeToggle()会切换淡入淡出效果。

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

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

小提琴

编辑：

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

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

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

score 0 · Accepted Answer

$('.showMe').hide();
$(".hoverMe").mouseover(function(){
$('.showMe').fadeOut();
$(this).find(".showMe").fadeIn();

});

score 0 · Accepted Answer

对于每个具有 class 的项目hoverMe，此代码会找到具有 class 的悬停项目的子项，showMe并使它们成为fadeIn()and fadeOut()。

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

score 0 · Accepted Answer

我建议：

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

$('.hoverMe').on('mouseenter mouseleave', function(e){
    // looks within the hovered-over element:
    $(this)
        // to find the '.showMe' element
        .find('.showMe')
        // stops all currently-running animations
        .stop(true, true)
        // fades the discovered '.showMe' element(s) in, or out
        // depending on whether the mouse entered, or left, the '.hoverMe' element            
        .fadeToggle(e.type == 'mouseenter');
});

JS 小提琴演示。

不过，这确实使用了 jQuery 1.9（与您使用 1.6.4 的原始演示不同）。

然而，如果你想继续使用 jQuery 1.6.4，你可以使用delegate()，虽然它有点难看，但不幸的是：

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

$('.hoverMe').parent().delegate('.hoverMe', 'mouseenter mouseleave', function(e){
    $(this).find('.showMe').stop(true, true).fadeToggle(e.type == 'mouseenter');
});

JS 小提琴演示。

参考：

jquery - 使用每种方法独立显示单个元素

4 回答 4

Related

Reference