只改變了內部元素中的類

所以我創建了一個關於用戶提交食譜的頁面。一些用戶已經提交了關於配方的簡短報價，其他用戶則沒有。如果存在，我想讓報價在用戶懸停在配方圖像上時顯示。只改變了內部元素中的類

現在，我使用的是這樣的：

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

第一個問題是，它改變了所有的食譜，不只是懸停在一個。第二個問題是，我不確定如何檢查該配方是否存在「滑塊描述」。我的工作是fiddle。我仍然在學習JQuery，請給我任何提示，請！

來源

2017-04-19 ebbBliss

你也可以用CSS來做到這一點。 https://jsfiddle.net/bkyn40f8/6/ –

這裏有一個溶液與檢查不存在的描述以及使用更高效的懸停功能：

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

它使用鮮爲人知$(selector, context)符號來僅選擇文字元素在盤旋的.recipe元素內。

JS Fiddle

來源

2017-04-19 17:17:39 nikamanish

不好意思劫持你的答案，但我想的是一樣的，不想寫另一個（簡化版）的答案，而是我可以改進和提高現有的答案。 – Christoph

因爲像你這樣的人@Christoph，這個社區正在成長，並幫助這麼多人。歡呼聲 – nikamanish

感謝您的幫助！這是幫助解決我的問題的唯一答案。但是，您能否向我解釋 '$（「。slider-description」，this）[0]'？我有點困惑，這是什麼意思？ – ebbBliss

改變你的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(); 
});

這樣你就只定位屬於該正在上空盤旋元素的滑塊，而不是針對他們的所有。

來源

2017-04-19 17:07:00 Lixus

訣竅是使用this傳遞給hover事件來查找裏面的元素。

$(".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>

來源

2017-04-19 17:07:55 nixkuroi

要闡述的筒喙象，那你面對的是，在jQuery的，當你做一個選擇，你是選擇在DOM一切問題。你想要做的是限制你的選擇範圍。

例如，看看下面的JS：

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

在jQuery中，一般當你進入到傳遞到一個jQuery對象（如在「懸停」功能的事件處理程序）的函數this上下文將是DOM元素而不是jQuery對象，所以用jQuery包裝this將爲您提供像正常一樣的jQuery對象。

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

來源

2017-04-19 17:19:10

只改變了內部元素中的類

回答

相關問題