简单的 jQuery show();隐藏（）;混乱答案

【问题标题】：Simple jQuery show(); hide(); confusion简单的 jQuery show();隐藏（）;混乱
【发布时间】：2013-09-18 05:01:51
【问题描述】：

我有这个 jQuery 代码：

<script type="text/javascript"> 
$(function() {
    $(".one-edition img").hover(function() {
        $(this).next(".editions-info-text").show();
    }, function() {
        $(this).next(".editions-info-text").hide();
    });
}); 
</script>

如果将 div one-edition 下的图像悬停在它上面会显示信息文本 div，当悬停时它会消失 - 很容易。

但是，我正在尝试使用 Fancybox 库使其正常工作，如下所示：

<div class="grid_3 one-edition">
    <a href="images/latest/MO20.jpg" rel="editions-1"><img src="http://placehold.it/200x250"></a>
    <a href="images/latest/MO20.jpg" rel="editions-1"></a>
    <a href="images/latest/MO20.jpg" rel="editions-1"></a>
        <div class="editions-info-text">
            <p>Title of edition</p>
            <p>Further information</p>
        </div>  
    </div>

图库工作正常，但 editions-info-text 不再显示或隐藏。这一定是与将 img 包装在锚标签中有关，但我一直在尝试弄乱它一段时间，觉得你们也许可以提供帮助。

【问题讨论】：

标签： jquery fancybox show-hide

【解决方案1】：

我认为问题来自$(this).next(".editions-info-text").show();。 $(this) 应该是图像元素，但next() 表示查找图像的兄弟姐妹，但.editions-info-text 不在其兄弟姐妹中。您需要稍微重写选择器查询。

【讨论】：

谢谢 - 这很有意义。你知道它是否有办法选择下一个 div，而不是下一个元素？
嗨@Grace，但如果代码现在看起来像这样，最好使用：<div class="grid_3"><div class="one-edition"> <a href="product-1.php"><img src="images/editions/1_Right_To_Buy_295.jpg"></a> </div> <div class="editions-info-text"> <p>Right To Buy</p> <p>C-type Print</p> </div> </div>
有很多方法可以做到：$(this).parent().parent().parent().find('.editions-info-text') or $(this).parent().parent().siblings('.editions-info-text') or $(this).parents('.one-edition').siblings('.editions-info-text')
谢谢，格蕾丝。我明白现在是如何布局的。再次感谢您的帮助:)

【解决方案2】：

只需使用 parent() 向上移动到您添加的<a>。然后像以前一样继续。

(function() {
     $(".one-edition a img").hover(function() {
         $(this).parent('a').next(".editions-info-text").show();
     },function(){
         $(this).parent('a').next(".editions-info-text").hide();
});

【讨论】：

谢谢！你的组合，和@Grace Shao 下面的组合奏效了。

【解决方案3】：

由于您更改了 html 的结构，next() jQuery API 正在返回另一个元素。

.editions-info-text

不是图像的下一个元素，因此您需要以这种方式重建脚本：

$(function() {
    $(".one-edition img").hover(function() {    
     $(this).parent().parent().find('.editions-info-text').show();
   //$('.one-edition').find(".editions-info-text").show();
        },function(){
     $(this).parent().parent().find('.editions-info-text').hide();
   //$('.one-edition').find(".editions-info-text").hide();
    });
});

更新在@grace shao 进行适当的观察后，上面的编辑代码将起作用

【讨论】：

这行不通，因为$('.one-edition') 将返回所有具有.one-edition 类的元素，但不会返回与$(this) 关联的元素。有可能不止一个$('.one-edition')