Question

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

现在，我正在使用它：

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

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

以下是我正在做的fiddle。我还在学习JQuery，所以请给我任何提示！

Answer 1

像这样改变你的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();
});

这样，您只会定位属于正在悬停的元素的滑块，而不是将它们全部定位。

Answer 2

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

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

它使用鲜为人知的$(selector, context)符号来仅选择悬停的.recipe元素中的文本元素。

JS Fiddle

Answer 3

诀窍是使用传递hover事件的this来查找里面的元素。

$(".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 {
  position: relative;
  display: inline-block;
  white-space: nowrap;
  overflow-y: hidden;
  font-family: 'Nunito', sans-serif;
  font-weight: 600;
  text-align: center
}

.slider-text {
  position: absolute;
  bottom: 0;
  width: 200px;
  padding: 0% 3% 3% 3%;
  color: white;
  white-space: normal;
  background: rgba(0, 0, 0, 0.45);
  overflow: hidden;
  z-index: 100;
  margin-left: 3px;
}

.slider-text:not(.asparagus-slider) {
  padding: 6% 3% 3% 3%;
}

.slider-text>h3 {
  font-size: 15px;
}

#asparagus {
  font-size: 14px;
  padding: 0% 3% 3% 3%;
}

.slider-info {
  padding-bottom: 30px;
}

.slider-description {
  display: none;
}

#chili-img,
#asparagus-img,
#macCheese-img,
#noBakePie-img {
  width: 200px;
  height: 200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
  <div class="row">
    <div class="col-md-3 recipe">
      <div class="slider-text">
        <h3>Bear Creek Chili</h3>
        <p class="slider-submit">
          Submitted by: Dottie User
        </p>
      </div>
      <img id="chili-img" src="http://mystateoffitness.com/wp-content/uploads/2016/07/big-game-chili.jpg">
    </div>
    <div class="col-md-3 recipe">
      <div class="slider-text asparagus-slider">
        <h3 id="asparagus">Beer Battered Asparagus with Lemon Herb Dipping Sauce</h3>
        <p class="slider-submit">
          Submitted by: Chris User
        </p>
        <p class="slider-description">
          <em>"This is the only way that I can enjoy asparagus"</em>
        </p>
      </div>
      <img id="asparagus-img" src="http://food.fnr.sndimg.com/content/dam/images/food/fullset/2007/9/10/0/IP0211_Beer_Battered_Asparagus.jpg.rend.hgtvcom.616.462.jpeg">
    </div>
    <div class="col-md-3 recipe">
      <div class="slider-text">
        <h3>Mac n' Cheese</h3>
        <p class="slider-submit">
          Submitted by: Annette User
        </p>
      </div>
      <img id="macCheese-img" src="https://images-gmi-pmc.edge-generalmills.com/c41ffe09-8520-4d29-9b4d-c1d63da3fae6.jpg">
    </div>
    <div class="col-md-3 recipe">
      <div class="slider-text">
        <h3>No Bake Peanut Butter Pie</h3>
        <p class="slider-submit">
          Submitted by: Shari User
        </p>
        <p class="slider-description">
          <em>"This recipe makes enough for two pies - one for your guests and one just for you!"</em>
        </p>
      </div>
      <img id="noBakePie-img" src="http://cdn2.tmbi.com/TOH/Images/Photos/37/300x300/exps17834_CCT1227369D54B.jpg">
    </div>
  </div>
</div>

Answer 4

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

例如，请查看以下JS：

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

在jQuery中，通常当你进入一个传递给jQuery对象的函数时（比如“hover”函数中的事件处理程序），this上下文将是DOM元素而不是jQuery对象，所以包装使用jQuery this将为您提供正常的jQuery对象。

我用这段代码更新了你的JSFiddle。 https://jsfiddle.net/bkyn40f8/5/

只更改悬停元素中的类

4 个答案: