只更改悬停元素中的类 [英] only change classes inside a hovered element

问题描述

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

So I'm creating a page about user-submitted recipes. Some users have submitted a short quote about the recipe, others have not. I wanted to have the quote, if it exists, to display when the user hovers over the image of the recipe.

现在，我正在使用它：

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

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

The first problem is that it changes for all the recipes, not just the one that is hovered on. The second problem is, I'm unsure how to check if the 'slider description' exists for that recipe or not.

这是一个小提琴我正在做的事情。我还在学习JQuery，请给我任何提示！

Here is a fiddle of what I'm working on. I'm still learning JQuery so give me any tips, please!

推荐答案

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

Here's one solution with checking for non existent descriptions as well as using a more efficient hover function:

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

它使用鲜为人知的 $（选择器，上下文） 表示法仅选择悬停中的文本元素.recipe 元素。

It uses the lesser known $(selector, context) notation to only select the text elements within the hovered .recipe element.

JS小提琴

这篇关于只更改悬停元素中的类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！