ボタンのクリックで前後にテキストを変更する

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

それを取り戻しますクリック。そして、テキストをCLICKEDに設定します。

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>