Question

请原谅我，但我仍然是jQuery的新手。我有一个网站上有一些高尔夫球包。我想要做的是当你将鼠标悬停在包裹上时，价格会在包裹的图像下滑动，并且视图包装按钮会在图像顶部淡入

我写了一些代码，当页面上只有一个包时，它可以正常工作。但是当页面上有多个包时会出现问题。当您将鼠标悬停在其中任何一个包上时，所有包都会被触发

$(document).ready(function () {
    $(".FPImage").hover(function () {
        $(".FPPrice").stop(true, true).slideDown(400);
        $(".FPFade").fadeIn('slow');
    }, function () {
        $(".FPPrice").stop(true, true).delay(10).slideUp(400);
        $(".FPFade").fadeOut('slow');
    });
});

HTML标记是

<div class="FPBox">
    <div class="FPName">Package Name</div>
    <div class="FPImage">
        <img src="" alt="Package" border="0" />
        <div class="FPFade" style="display:none">View Package</div>
    </div>
    <div class="FPPrice" style="display:none;">Price</div>
</div>

我将非常感谢任何帮助，我可以如何定位我所徘徊的div而不是所有触发的div

Answer 1

问题是你正在触发所有课程。您只想触发.FPImage div

中的类

尝试以下内容：

$(document).ready(function() {
    $(".FPImage").hover(function() {
      var $this = $(this);
      $this.next(".FPPrice").stop(true, true).slideDown(400);
      $this.find(".FPFade").fadeIn('slow');
    }, function() {
      var $this = $(this);
      $this.next(".FPPrice").stop(true, true).delay(10).slideUp(400);
      $this.find(".FPFade").fadeOut('slow');
    });
});

Answer 2

您需要找到相关元素

$(document).ready(function () {
    $(".FPImage").hover(function () {
        $(this).next(".FPPrice").stop(true, true).slideDown(400);
        $(this).find(".FPFade").stop(true, true).fadeIn('slow');
    }, function () {
        $(this).next(".FPPrice").stop(true, true).delay(10).slideUp(400);
        $(this).find(".FPFade").stop(true, true).fadeOut('slow');
    });
});

FPPrice元素是下一个兄弟，其中FPFade是孩子

演示：Fiddle

Answer 3

以下代码行中的$(".FPPrice")：

 $(".FPPrice").stop(true, true).slideDown(400);

将在页面上选择所有带有FPPrice类的节点。

你可能想要：

// find the parent ".FPBox" starting from the current node : var $box = $(this).closest(".FPBox"); // search only inside this box : $box.find(".FPPrice").stop(true, true).slideDown(400); $box.find(".FPFade").fadeIn('slow');

Jquery悬停触发所有div

3 个答案: