내 CSS가 jquery .hover()로 올바르게 렌더링되지 않는 이유는 무엇입니까?

div가 숨겨져있을 때만 표시 할 공통 클래스와 숨겨진 div가있는 div가 있습니다. hiding div의 ID에 따라 대상 숨겨진 div에 다른 html 문자열을 렌더링하고 html을 추가하고 숨기기를 해제 한 다음 다시 숨기고 mouseLeave에서 div를 지워야합니다. 그것은 충분히 간단하게 보인다, 나는 switch 문을 사용하여 ID를 얻고 div를 적절히 렌더링한다. 콘솔 로그에 내 switch 문을 기반으로 올바른 html 문자열이 표시되지만 switch 문에서 마지막 항목 만 대상 div에 추가됩니다. http://jsfiddle.net/xo1h8quq/내 CSS가 jquery .hover()로 올바르게 렌더링되지 않는 이유는 무엇입니까?

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

출처

2014-10-23 lacostenycoder

를 수행하여 코드을 많이 단축 할 수있다'는 마지막 경우에 각각의 시간을 통해 떨어지면 그 이유는. –

읽기 일기는 ...) 당신은`case` 문이 중단`누락이

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

DEMO

출처

2014-10-23 08:13:50 Anton

이 시도 :

전체 코드는 여기

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> 태그를 폐쇄하지 않습니다, 당신은 모든 스위치에서 break 부분을 놓친 성명서. 대소 문자를 구분하지 않으면 다음과 같은 대소 문자가 모두 실행됩니다. 텍스트는 항상/글루텐 (이름을 제외하고 동일 될 것입니다 경우는 휴식을하지 유용 할 수 있습니다 왜 당신이 저를 요구하는 경우에 ~~어리석은 행동 ...~~

정보는 this

출처

2014-10-23 08:04:23 Shaeldon

어째서 바보 같은 행동입니까? 다음 시나리오로 넘어가는 것이 많은 시나리오에서 바람직합니다. –

@DeeMac 글쎄, 내가 동의해야하는 또 다른 편집을 추가하기 위해 읽고 나서 동의한다. – Shaeldon

@anton 감사합니다. 당신은 정확 합니다만, 이것은 더미 텍스트입니다. 실제로는 텍스트가 다릅니다. 하지만 좋은 점은 그다지 적지 않습니다. – lacostenycoder

내 CSS가 jquery .hover()로 올바르게 렌더링되지 않는 이유는 무엇입니까?

답변

관련 문제