버튼 클릭시 앞뒤로 텍스트 변경

Question

이미 변형 된 요소의 텍스트를 어떻게 바꿀 수 있습니까?

$('.target').click(function() { 
 
    
 
    
 

 
    if($(this).hasClass('clicked')) { 
 
    $(this).text('ORIGINAL').toggleClass('clicked'); 
 
    } 
 

 
    $(this).text('CLICKED').toggleClass('clicked'); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<a class='target'>ORIGINAL</a>

Answer 1

당신은 jQuery의 데이터 저장소에 원본을 저장할 수, 다음 코드의 마지막 줄은 매번 당신을 트리거

$('.target').each(function() { 
 
    
 
    $(this).data('original', $(this).text()); 
 
    
 
}).on('click', function() { 
 
    $(this).toggleClass('clicked').text(function(_, txt) { 
 
     var org = $(this).data('original'); 
 
    
 
     return txt === org ? 'CLICKED' : org; 
 
    }); 
 
});

.clicked {color: red}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<div class="target">Click</div> 
 
<br/> 
 
<div class="target">Click</div> 
 
<br/> 
 
<div class="target">Click</div> 
 
<br/> 
 
<div class="target">Click</div> 
 
<br/> 
 
<div class="target">Click</div> 
 
<br/>

Answer 2

다시 그것을 얻을 딸깍 하는 소리. 그리고 텍스트를 클릭하여으로 설정합니다.

else 문을 사용해야합니다.

$('.target').click(function() { 
 

 
    if($(this).hasClass('clicked')) { 
 
    $(this).text('ORIGINAL').toggleClass('clicked'); 
 
    } else { 
 
    $(this).text('CLICKED').toggleClass('clicked'); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<a class='target'>ORIGINAL</a>