Javascript 仅更改悬停元素内的类

所以我正在创建一个关于用户提交的食谱的页面。一些用户提交了关于配方的简短报价，其他用户则没有。我希望当用户将鼠标悬停在菜谱图像上时，能够显示引用（如果存在）

现在，我用的是：

$(".recipe").hover(function(){
            $(".slider-submit").hide();
            $(".slider-description").show();
        },
        function(){
            $(".slider-submit").show();
            $(".slider-description").hide();
        });

第一个问题是，它改变了所有的食谱，而不仅仅是一个悬停。第二个问题是，我不确定如何检查该配方是否存在“滑块描述”

---

这是我正在做的工作的一部分。我还在学习JQuery，所以请给我一些提示

像这样更改您的JS：

$(".recipe").hover(function(){
    $(this).find(".slider-submit").hide();
    $(this).find(".slider-description").show();
},
function(){
    $(this).find(".slider-submit").show();
    $(this).find(".slider-description").hide();
});

---

这样，您将只针对属于被悬停元素的滑块，而不是针对所有滑块。

诀窍是使用随悬停事件传入的

来查找其中的元素


$（“.recipe”）.hover（函数（）{
$（this.find（“.slider submit”）.hide（）；
$（this.find（“.slider description”）.show（）；
},
函数（）{
$（this.find（“.slider submit”）.show（）；
$（this.find（“.slider description”）.hide（）；
});
.recipe{
位置：相对位置；
显示：内联块；
空白：nowrap；
溢出y：隐藏；
字体系列：“Nunito”，无衬线；
字号：600；
文本对齐：居中
}
.滑块文本{
位置：绝对位置；
底部：0；
宽度：200px；
填充：0%3%3%3%；
颜色：白色；
空白：正常；
背景：rgba（0,0,0,0.45）；
溢出：隐藏；
z指数：100；
左边距：3倍；
}
.slider文本：不是（.asparagus slider）{
填充：6%3%3%3%；
}
.滑块文本>h3{
字体大小：15px；
}
#芦笋{
字体大小：14px；
填充：0%3%3%3%；
}
.滑块信息{
填充底部：30px；
}
.滑块说明{
显示：无；
}
#辣椒img，
#芦笋，
#麦琪img，
#noBakePie img{
宽度：200px；
高度：200px；
}

熊溪辣椒

提交人：Dottie用户

柠檬香草蘸汁啤酒打芦笋

提交人：Chris User


“这是我吃芦笋的唯一方法”

苹果奶酪

提交人：Annette用户

不烤花生酱派

提交人：Shari用户


“这个食谱足够做两个馅饼——一个给你的客人，一个只给你！”

这里有一个解决方案，可以检查不存在的描述，并使用更有效的悬停功能：

$(".recipe").hover(function(){
   if ($(".slider-description",this)[0]){
      $(".slider-submit",this).toggle();
   }
   $(".slider-description",this).toggle();
});

它使用鲜为人知的符号仅选择悬停的
.recipe
元素中的文本元素

为了解释Lixus，您面临的问题是，在jQuery中，当您进行选择时，您正在选择DOM中的所有内容。你想做的是限制你的选择范围

例如，查看以下JS：

 $(".slider-submit").hide();  // Global selection
 $(this).find(".slider-submit").hide();  // Limit search to only descendants of "this"

在jQuery中，通常当您输入传递到jQuery对象中的函数（如“hover”函数中的事件处理程序）时，
此
上下文将是DOM元素，而不是jQuery对象，因此用jQuery包装
此
将提供与正常情况相同的jQuery对象

我用这段代码更新了您的JSFIDLE
 你也可以用CSS来实现这一点。很抱歉劫持了你的答案，但我也有同样的想法，我不想再写一个（reduntant）答案，因为我可以改进和更新现有的答案。正是因为像你这样的人@Christoph，这个社区才得以发展并帮助了这么多人。干杯谢谢你的帮助！这是对我的问题的两个部分都有帮助的唯一答案。但是，你能给我解释一下“$（“.slider description”，这个）[0]”吗？我对这意味着什么感到有点困惑？
if（$（“.slider description”，this）[0]）
检查描述是否存在，如果存在，然后
$（“.slider submit”，this）。toggle（）
将第二个参数传递到jQuery选择器时，将其状态从
show
切换到
hide
或
hide
切换到
show
@ebbBliss，这将成为“上下文”。这是限制范围的好方法。如果该结果的第一个索引存在，则表示选择至少找到了一项。您还可以使用
$（“selectiong”）.length
查找选择了多少个元素