.hover() 및 .replaceWith()를 결합하십시오.

Question

과 협력하려면이 간단한 .replaceWith()을 얻을 수 없습니다. 도움이 되시면 감사하겠습니다.

마우스를 가져 가면 텍스트가 확장으로 바뀌고 마우스를 떼면 SHOWS로 돌아갑니다. EXPAND로 바꾸려면 텍스트를 가져올 수 있지만 원래 SHOWS로 돌아가려면 텍스트를 가져올 수 없습니다.

JSFiddle 코드는 누구나 충분히 볼 수 있습니다. 당신이 .replaceWith() 방법을 사용하면

$(document).ready(function() { 
    $("p").hover(
     function() { 
     $('#shows').replaceWith('<h2>Expand</h2>'); 
     }, 
     function() { 
     $('#shows').replaceWith('<h2>Shows</h2>'); 
     } 
    ); 
}); 

Answer 1

당신이이 id 속성을 잃고을 교체 할 때 문제입니다. 따라서 함수의 hover() 이벤트가 발생해도 요소 #shows을 찾을 수 없습니다.

대신을 시도

이

// Change H1 text to "EXPAND" when hovered on, and go *back* to "SHOWS" when the mouse leaves 

$(document).ready(function() { 
    $("p").hover(
     function() { 
     $('#shows').text('Expand'); 
     }, 
     function() { 
     $('#shows').text('Shows'); 
     } 
    ); 
}); 

당신은 항상 다음과 같은 예에서 .text() 또는 .html()를 사용해야합니다 당신은 오히려 내부 비트에게 TEXT 또는 <h2> 태그에 포함 된 HTML을 변화하고 싶은 acctually 모든 때문에 전체 요소보다

당신이 replaceWith를 사용하려면

:

$(document).ready(function() { 
    $("p").hover(
     function() { 
     $('#shows').replaceWith('<h2 id="shows">Expand</h2>'); 
     }, 
     function() { 
     $('#shows').text('<h2 id="shows">Shows</h2>'); 
     } 
    ); 
}); 

Answer 2

, 요소 #shows는 더 이상 존재하지 않습니다 더 이상 교체 할 수 없습니다 :

Answer 3

.replaceWith() 완전히 원래의 요소 (#shows를) 대체 할이 ->id=#shows에 더 이상 요소는 (두 번째 시도는 실패합니다)을 찾을 수 있습니다.

$(document).ready(function() { 
    $("p").hover(
     function() { 
     $('#shows').html('<h2>Expand</h2>'); 
     }, 
     function() { 
     $('#shows').html('<h2>Shows</h2>'); 
     } 
    ); 
});