CODEWITHSUNDEEP
javascriptjqueryhtmlcssjquery-hover
ebbBliss
ebbBliss

Reputation: 173

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.

Right now, I'm using this:

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

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

Upvotes: 3

Views: 174

Answers (4)

nixkuroi
nixkuroi

Reputation: 2269

The trick is to use this that gets passed in with the hover event to find the elements inside.

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

Upvotes: 2

nikamanish
nikamanish

Reputation: 772

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();
});

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

JS Fiddle

Upvotes: 3

joe_coolish
joe_coolish

Reputation: 7259

To expound on Lixus, the issue that you're facing is that in jQuery, when you do a selection, you are selecting EVERYTHING in the DOM. What you wanted to do is limit your selection scope.

For example, look at the following JS:

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

In jQuery, generally when you enter into a function passed into a jQuery object (like the event handler in the "hover" function) the this context will be the DOM element and not the jQuery object, so wrapping this with jQuery will give you the jQuery object like normal.

I updated your JSFiddle with this code. https://jsfiddle.net/bkyn40f8/5/

Upvotes: 1

Lixus
Lixus

Reputation: 511

Change your JS like 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();
});

This way you will only target the sliders that belong to the element that is being hovered over, instead of target them all.

Upvotes: 5

Related Questions