Why won't my CSS render correctly with jquery .hover()?

Question

I have divs with a common class and a hidden div to show only when said div is hovered over. Depending on the hovered div's ID it should render out a different html string in the target hidden div, append html, unhide and then hide again and clear div on mouseLeave. It seems simple enough, I'm using a switch statement to get the ID of triggering div and render the correct HTML accordingly. Console log shows the correct html string based on my switch statement, however only the last item in the switch statement gets appended to target div.

Full code is here: http://jsfiddle.net/xo1h8quq/

$( document ).ready(function(){

  var buildHtml = function(id) {
    console.log(id);
    var html;
    switch (id) {
      case 'gluten':
        html = '<p>This is why gluten sucks</p>';
      case 'dairy':
        html = '<p>This is why dairy sucks<p>';
      case 'soy':
        html = '<p>This is why soy sucks<p>';
      case 'gmo':
        html = '<p>This is why gmo sucks<p>';
      case 'preservatives':
        html = '<p>This is why preservatives suck<p>';
      case 'fillers':
        html = '<p>This is why fillers suck<p>';
      case 'sugars':
        html = '<p>This is why sugars suck<p>';
    }
    return html;
  };

  $( ".why-out" ).hover(
    function() {
     console.log(this);
      var html = buildHtml(this.id);
      $('#why-out-pop').html('');
      //console.log(html);
      $('#why-out-pop').append(html).removeClass('hide');

    }, function() {
      $('#why-out-pop').html('').addClass('hide');
    }
  );


});

.hide {
  visibility: hidden;
}

#why-out-pop {
  position: absolute;
  margin-top: -158px;
  margin-left: 30px;
  border-style: solid;
  border-width: 3px;
  border-radius: 40px;
  border-color: black;
  background-color: #c3c3c3;
  padding: 10px;
  color: black;
  text-align: right;
  font-weight: light;
  z-index: 1000;
}

.why-out {
  text-align: right;
  font-weight: bold;
}
#out-head {
  text-align: right;
  font-weight: bold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test Seester</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script type="text/javascript" src="fuck.js"></script>
</head>
<body>
  <div id="out-section">
  <div class="why-out" id="out-head">WHAT'S OUT</div>
  <br/>
  <div class="why-out" id="gluten">Gluten/Grain /OUT</div>
  <br>
  <div class="why-out" id="dairy">Dairy /OUT </div>
  <br>
  <div class="why-out" id="soy">Soy /OUT </div>
  <div class="why-out" id="gmo">GMO's /OUT </div>
  <div class="why-out" id="preservatives">Preservatives /OUT </div>
  <div class="why-out" id="fillers">Fillers /OUT </div>
  <div class="why-out" id="sugars">Refined Sugars /OUT </div>
</div>

<div class="why-out hide" id="why-out-pop">
    <p>This is a test</p>
</div>

<style>


</style>
</body>

Your `case` statements are missing `break;`, that's why it falls through to the last case each time. — Tian van Heerden, Oct 23 '14 at 08:02

score 2 · Answer 1 · edited May 23 '17 at 11:57

2

Try this:

var buildHtml = function(id) {
console.log(id);
var html;
switch (id) {
  case 'gluten':
    html = '<p>This is why gluten sucks</p>';break;
  case 'dairy':
    html = '<p>This is why dairy sucks</p>';break;
  case 'soy':
    html = '<p>This is why soy sucks</p>';break;
  case 'gmo':
    html = '<p>This is why gmo sucks</p>';break;
  case 'preservatives':
    html = '<p>This is why preservatives suck</p>';break;
  case 'fillers':
    html = '<p>This is why fillers suck</p>';break;
  case 'sugars':
    html = '<p>This is why sugars suck</p>';break;
   }
   return html;
 };

You are not closing your <p> Tags, and you missed the break Part in every Switch Statement. If you dont Break the case, every following case gets executed to. ~~Stupid behaviour if you ask me...~~

On Information why it can be useful not to have a break read this

edited May 23 '17 at 11:57

Community

1
1

answered Oct 23 '14 at 08:04

Shaeldon

873
4
18
28

Why is it stupid behaviour? Falling through to the next case is desirable in many scenarios. – Oct 23 '14 at 08:08
@DeeMac well i agree after reading up to add another edit i have to agree. – Shaeldon Oct 23 '14 at 08:09
@anton Thank and you're correct, however this is dummy text. The actually text will be different. But good point none the less. – lacostenycoder Oct 23 '14 at 15:45
@Shaeldon the break was exactly what was missing! Thanks! – lacostenycoder Oct 23 '14 at 15:46

score 2 · Accepted Answer · answered Oct 23 '14 at 08:13

2

If the text is always going to be the same except for the name (gluten/diary...) you can shorten the code alot by doing this

var buildHtml = function (id) {
    return '<p>This is why ' + id + ' sucks</p>';
};

DEMO

answered Oct 23 '14 at 08:13

Anton

32,245
5
44
54

Why won't my CSS render correctly with jquery .hover()?

2 Answers2