How to change text in button when clicked?

Question

My HTML Code is like this :

<table>
  <tbody class="iteration">
    <tr>
      <td>
        <button class="save">More</button>
      </td>
      <td>
        <div class="cruisedropd">
          <div class="loading"></div>
        </div>
      </td>
    </tr>
  </tbody>
  <tbody class="iteration">
    <tr>
      <td>
        <button class="save">More</button>
      </td>
      <td>
        <div class="cruisedropd">
          <div class="loading"></div>
        </div>
      </td>
    </tr>
  </tbody>
</table>

My Javascript code is like this :

$(function(){
    $(".cruisedropd").hide();
    $('.save').click(function () {
        var parent = $(this).closest("tbody.iteration");

        parent.toggleClass('is_loading',  parent.hasClass('is_loading') );
        parent.find(".cruisedropd").toggle();
        parent.find('.loading').html("work");

    });


});

Demo is like this : https://jsfiddle.net/oscar11/53okmr78/1/

I want to change text in button. So when click button "more", the button change to button "hide". Vice versa

Thank you very much

I update my question and jsfiddle – moses toh Apr 11 '16 at 07:32 — moses toh, Apr 11 '16 at 07:32
https://jsfiddle.net/y75eL9m9/ – Satpal Apr 11 '16 at 07:34 — Satpal, Apr 11 '16 at 07:34

score 2 · Accepted Answer · answered Apr 11 '16 at 07:35

2

You can use .text()

A function returning the text content to set. Receives the index position of the element in the set and the old text value as arguments.

$('.save').click(function() {
    $(this).text(function(_, text) {
      return text == "More" ? "Hide" : "More";
    });
});

DEMO

answered Apr 11 '16 at 07:35

Satpal

132,252
13
159
168

Thank you very much. It's working – moses toh Apr 11 '16 at 07:41

score 1 · Answer 2 · answered Apr 11 '16 at 07:35

Add this in your function

    $(function(){
    $(".cruisedropd").hide();
    $('.save').click(function () {
        var $self = $(this);
        $self.text() == "More" ? $self.text('Hide') : $self.text('More');

        var parent = $(this).closest("tbody.iteration");
        $(parent).block({ message: null }); 

        parent.toggleClass('is_loading',  parent.hasClass('is_loading') );
        parent.find(".cruisedropd").toggle();
        parent.find('.loading').html("work");

    });


});

https://jsfiddle.net/53okmr78/6/

score 0 · Answer 3 · edited Apr 11 '16 at 08:03

0

Add this code to your $(".save").click(){...

if($(this).text() == "More"){
    $(this).text("Hide");
}else{
    $(this).text("More")
}

edited Apr 11 '16 at 08:03

Thomas Bormans

5,156
6
34
51

answered Apr 11 '16 at 07:36

Velimir Tchatchevsky

2,812
1
16
21

How to change text in button when clicked?

3 Answers3