單擊按鈕來回更改文本

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>