jQuery - 클래스에서 선택한 요소에 연결 추가를 중단하려면 어떻게해야합니까?

Question

사람들이 구현할 수있는 다양한 옵션을 설명하는 페이지가 있습니다. 이러한 설명을보다 잘 정의하기 위해 마우스를 올려 놓을 때 관련 이미지가 큰 아이콘이 나타납니다.

이에 대한 HTML은

<div id="innerlayout"> 
<ul> 
    <li>Content for 1 
    <a class="x" href="javascript:void(0)" rel="large-image-1.jpg" title="Caption for Large Image 1"> 
    <img src="learn-more.jpg" alt="Learn More Icon" width="30" height="30" /> 
    </a> 
    </li> 
    <li>Content for 2 
    <a class="x" href="javascript:void(0)" rel="large-image-2.jpg" title="Caption for Large Image 2"> 
    <img src="learn-more.jpg" alt="Learn More Icon" width="30" height="30" /> 
    </a> 
    </li> 
</ul> 
</div> 

는 jQuery를 내가 현재이 같은 모습을 가지고 같은 것을 볼 것입니다 (편의상 내가 클래스 X 만 2 요소를 포함 한을하지만 현실에서 더 많은있을 것입니다).

$document.ready(function() { 
$('a.x', $('#innerlayout')).hover(
    function() { 
    var path = $(this).attr('rel'); 
    var text = $(this).attr('title'); 
    $(this).append($("<p class='revealer'><img src='"+path+"' /><br />"+text+"</p>")); 
    $('p.revealer').hide().fadeIn(500); 
    }, 
    function() { 
    $(this).find('p:last').remove(); 
    } 
); 
}); 

이 잘 작동하지만, 첨부 된 단락이 아니라 제거보다는 숨겨진 그래서 내가 그것을 변경보고 있었다는 < > 태그의 클래스는 새롭게이의 "X"가 아닌 다른 이후 마우스 오버로 변경 등급이 < 인 경우 >은 현재 기존 콘텐츠를 표시합니다. 이 문제를 생각해 냈지만 변경된 < > 요소 클래스에도 불구하고 이후의 마우스 오버시마다 계속해서 콘텐츠를 추가합니다. 누구든지 내가 여기서 잘못하고있는 것을 나에게 제안 할 수 있습니까? 어떻게 고칠 수 있습니까? 미리 감사드립니다.

$(document).ready(function() { 
$('a.x', $('#innerlayout')).hover(
    function() { 
    var path = $(this).attr('rel'); 
    var text = $(this).attr('title'); 
    $(this).append($("<p class='revealer'><img src='"+path+"' /><br />"+text+"</p>")); 
    $('p.revealer').hide().fadeIn(500); 
    }, 
    function() { 
    $(this).find('p:last').hide(); 
    $(this).removeClass('x').addClass('revealed'); 
    } 
); 
$('a.revealed', $('#innerlayout')).hover(
    function() { 
    $(this).find('p').show(); 
    }, 
    function() { 
    $(this).find('p').hide(); 
    } 
); 
}); 

Answer 1

라인 $(this).append($("<p class='revealer'><img src='"+path+"' /><br />"+text+"</p>"));. 이것은 당신이 잘못하고있는 것입니다. 각 호버에 요소를 추가합니다. 추가하는 경우 mouseout에서이 요소를 제거해야합니다. 그렇지 않은 경우 load에 추가하고 숨기기를 유지하고 hover 또는 mousein에 show을 붙이십시오.

Answer 2

대신

$(this).append($("<p class='revealer'><img src='"+path+"' /><br />"+text+"</p>")); 

의 당신은

$(this).html("your content") //if you want to replace the whole content 

달리 사업부 또는 스팬 태그를 생성 시도하고 그냥 특정 태그를 대체 할 수 있습니다.

호프 (Hope) 귀하의 질문에 대한 답변입니다.