클릭 및 호버 기능 결합 - JQuery

Question

내 목표는 다른 텍스트를 가리키면 마우스를 올려 놓을 때 텍스트가 되돌아 오는 것입니다. 그런 다음 클릭하면 텍스트가 다른 것으로 바뀝니다.

내가 가진 각 기능은 다른 기능없이 개별적으로 작동하지만 뒤로 가져 가면 마우스를 올리면 기능이 작동합니다. 나는 그것이 숨겨 지거나 오버라이드되어서 공중에 매달려있을 때 그것이 발사되지 않도록하기 때문에 그것이 확실하다고 확신합니다. 내 인생을 위해 나는 그것을 하나의 기능으로 결합하는 방법을 알 수 없다. 버튼 내의 범위 안의 텍스트를 바꿉니다. 여기

내가 지금까지 무엇을 가지고 :

또한 이전 텍스트 - 다시 되돌아

호버 기능

$(function(){ 
    var prev;  
    $('#p1Button').hover(function(){ 
     prev = $(this).text(); 
     $(this).text("Clicky Clicky!"); 
    }, function(){ 
     $(this).text(prev) 
    }); 
}); 

클릭 기능 :

$("#p1Button").click(function(){ 
    $('#buttontext').replaceWith("Clicked!"); 
}); 

HTML 버튼 텍스트가 변경 :

<button id=p1Button><span id="buttontext"> please select me!</span></button> 

Answer 1

span buttontext를 텍스트로 바꾸므로 켜기를 클릭하면 replace에게 연락 할 수 없습니다. 그래서 이것은 올바른 코드입니다.

$('#p1Button').hover(function(){ 
    prev = $(this).text(); 
    $(this).find('#buttontext').text("Clicky Clicky!"); 
}, function(){ 
    $(this).find('#buttontext').text(prev) 
}); 

JSfiddle! - 당신이 replaceWith을 사용하기 때문에 https://jsfiddle.net/dhananjaymane11/apLqa5k5/

Answer 2

$ (이)는 .text는() 만 클릭 기능이 작동 후 클릭하지 않습니다 참조 text.I #buttontext을 찾을 .SO 버튼의 텍스트를 변경할 것 귀하의 전체 요소를 제거하므로 span가 삭제됩니다 !!!

$('#p1Button').hover(function(){ 
    prev = $(this).find('#buttontext').text(); 
    $(this).find('#buttontext').text("Clicky Clicky!"); 
}, function(){ 
    $(this).find('#buttontext').text(prev) 
}); 
$("#p1Button").click(function(){ 
$('#buttontext').text("Clicked!"); //replaceWith is not working here ,it remove all element 
});