Question

我有一个共同类和一个隐藏div的div只有当所述div悬停时才会显示。根据悬停的div的ID，它应该在目标隐藏div中呈现不同的html字符串，附加html，取消隐藏然后再次隐藏并清除mouseLeave上的div。看起来很简单，我使用switch语句来获取触发div的ID并相应地呈现正确的HTML。控制台日志根据我的switch语句显示正确的html字符串，但只有switch语句中的最后一项被附加到目标div。

完整代码在此处：http://jsfiddle.net/xo1h8quq/

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 1

试试这个：

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

您没有关闭<p>代码，而且错过了每个Switch语句中的break部分。如果您不打破案例，则会执行以下每个案例。 ~~如果你问我愚蠢行为......~~

On Information为什么不休息阅读this

是有用的

Answer 2

如果文字总是相同的，除了名字（面筋/日记......），你可以通过这样做缩短代码

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

DEMO

为什么我的CSS不会使用jquery .hover（）正确呈现？

2 个答案: