は、ホバリングされた要素内のクラスのみを変更します。

Question

これで、ユーザーから送信されたレシピに関するページを作成しています。いくつかのユーザーは、レシピについて短い引用文を提出している人もあれば、そうでない人もいる。ユーザーがレシピのイメージ上にマウスを移動したときに表示する引用符がある場合は、それを表示したいと考えました。第一の問題は、それがすべてのレシピではなく、上の推移れる一つだけのために変化することである

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

：

今、私はこれを使用しています。 2番目の問題は、スライダーの説明がレシピに存在するかどうかを確認する方法がわかりません。

ここに私が取り組んでいるもののfiddleがあります。私はまだJQueryを学んでいるので、何かヒントを教えてください！

Answer 1

ここで非実在の記述をチェックするだけでなく、より効率的なホバー機能を使用して一つの解決策です：

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

それだけで選択することがあまり知られて$(selector, context)表記法を使用していますホバリングされた.recipe要素内のテキスト要素。

JS Fiddle

Answer 2

は、このようなあなたの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 3

トリックは、内部の要素を見つけるためにホバーイベントで渡される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を見て：jQueryので

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

、あなたは（「ホバー」機能でのイベントハンドラのような）jQueryオブジェクトに渡された関数の中に入り、一般的にthisコンテキストjQueryオブジェクトではなくDOM要素になるので、thisをjQueryでラップすると、通常のようにjQueryオブジェクトが表示されます。

JSFiddleをこのコードで更新しました。 https://jsfiddle.net/bkyn40f8/5/