Change text with onclick then change back

Question

I trying to change the text link with particular word with a click handler. When I click again the text link should change back. How can I do this?

<div class="checkLevel" id="damonkEYkEY">
    <span data-bind="css: safeLevelClass"> </span>
    <a href="#" id="checkLevelBtn">签到</a>
</div>

$(document).ready(function(){
    $("#damonkEYkEY").click(function(){
        $(".checkLevel a").text('签到成功');            
    });
});

@guradio Hi , do you mind show me the way of the jquery how to do this ? im new on this . thanks you — Morgan Ng, Oct 03 '16 at 08:21
This may be a duplicate question: http://stackoverflow.com/questions/13652835/button-text-toggle-in-jquery — JDW, Oct 03 '16 at 08:25

score 5 · Accepted Answer · answered Oct 03 '16 at 08:22

5

To achieve this you can provide a function to the text() method and use a ternary expression to read the current text value and update it accordingly. Try this:

$(document).ready(function() {
  $("#damonkEYkEY").click(function() {
    $(".checkLevel a").text(function(i, t) {
      return t == '签到' ? '签到成功' : '签到';
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="checkLevel" id="damonkEYkEY">
  <span data-bind="css: safeLevelClass"> </span>
  <a href="#" id="checkLevelBtn">签到</a> 
</div>

answered Oct 03 '16 at 08:22

Rory McCrossan

331,213
40
305
339

Hi Rory , your code are perfect , Thanks verry much – Morgan Ng Oct 03 '16 at 08:24
Hi Rory is that possible to add show to calendar when the text link change to '签到成功'? – Morgan Ng Oct 03 '16 at 08:27
Yes, but that's a very broad request. Have a look for jQuery datepicker controls. If you get stuck, start a new question about it. – Rory McCrossan Oct 03 '16 at 08:29
Noted on this , Thanks you – Morgan Ng Oct 03 '16 at 08:30
No problem, glad to help – Rory McCrossan Oct 03 '16 at 08:48

score 0 · Answer 2 · answered Oct 03 '16 at 08:24

Maybe like this:

$(document).ready(function(){
    var oldText = $(".checklevel a").text();
    $("#damonkEYkEY").click(function(){
        $(".checkLevel a").text('签到成功');

    });
    //Suppose back is an id
    $("#back").click(function(){
        $(".checkLevel a").text('oldText);
    });

});

score 0 · Answer 3 · answered Oct 03 '16 at 08:25

Do you mean like this?

$(document).ready(function(){
    $("#damonkEYkEY").click(function(){
        var ttext = $('a#checkLevelBtn').text();          
        $("a#checkLevelBtn").text(ttext == '签到成功' ? '签到' : '签到成功');
    });
});

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

<div class="checkLevel" id="damonkEYkEY">
    <span data-bind="css: safeLevelClass"> </span>
    <a href="#" id="checkLevelBtn">签到</a>
</div>

Change text with onclick then change back

3 Answers3