CODEWITHSUNDEEP
javascriptjquery
Jeb675
Jeb675

Reputation: 45

Change and change back text in button jquery

I would like to have a jquery button event where the first time a button is clicked a div (with class .explanation) appears and the text changes and the second time it is clicked the div is hidden and the text changes back to the original text. I can do the first part but the second part does not work. In the below changing - (toggleClass("hidden") - to - .fadeOut... - doesn't work either so I think I have got something wrong with if and else. Thanks in advance

$("button:nth-of-type(1)").click(function() {
  if (this.text = "Read Explanation") {
    $(".explanation").fadeIn("slow", function() {});
    $(this).text("Hide Explanation");
  } else {
    $(this).text("Read Explanation");
    $(".explanation").toggleClass("hidden");
  }
});

Upvotes: 1

Views: 44

Answers (4)

Jeb675
Jeb675

Reputation: 45

Thanks everyone. This seems to be the simplest / close to what I had. I changed as suggested by Ankit: this to $(this) text to text() = to == Using - fade out - instead of - hide - helped 

    $( "button:nth-of-type(1)" ).click(function() {
if($(this).text() == "Read Explanation") {
    $(".explanation").fadeIn( "slow", function() {
    });
    $(this).text("Hide Explanation");
    } else {
    $(this).text("Read Explanation");
    $(".explanation").fadeOut( "slow", function() {
    });
    }
});

Upvotes: 0

Felipe Tascón
Felipe Tascón

Reputation: 1

you can't make decisions based on data that can change.
if the text of the button changes, you'll need to change your code. by this way, if the text of the button changes, you need to change your data. This is not the best option, but it may works.

https://jsfiddle.net/foo8drb2/8/

var data = {
    1: "Read Explanation",
    2: "Hide Explanation"
}
// asssign default id to the text
var id_text = 1; //1 id for "Read Explanation"
// add data attribute to the button
$("button:nth-of-type(1)").attr("data-id-text", id_text);
// event
$("button:nth-of-type(1)").click(function () {
    if ($(this).attr("data-id-text") == 1) {
        //change id_text -> 2 for "Hide Explanation"
        id_text = 2;
        // show hide options
        $(".explanation").fadeIn();
    } else {
        //change id_text -> 1 for "Read Explanation"
        id_text = 1;
        // show hide options
        $(".explanation").fadeOut();
    }
    // change data id
    $(this).attr("data-id-text", id_text);
    // update text
    $(this).text(data[id_text]);
});

Upvotes: 0

xianshenglu
xianshenglu

Reputation: 5329

change

if(this.text = "Read Explanation") {

to

if($(this).text() === "Read Explanation") {

a demo:

$("button:nth-of-type(1)").click(function() {
  if ($(this).text() === "Read Explanation") {
    //$(".explanation").fadeIn("slow", function() {});
    $(this).text("Hide Explanation");
  } else {
    $(this).text("Read Explanation");
  }

  $(".explanation").toggleClass("hidden");
});
.hidden {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div><button>Read Explanation</button></div>
<div class="explanation hidden">explanation</div>

  1. $(this) is jquery object with text() attribute while this is pure js object without text or text() attribute in this case.

  2. = is assignment operator while === is Comparison operators

Upvotes: 2

Ankit Agarwal
Ankit Agarwal

Reputation: 30739

There are several issues in your code:

  1. this should be $(this)
  2. text should be text()
  3. You are using assignment operator in if condition. It should be comparison operator == or strict comparison operator ===
  4. You can toggle the hidden class outside if-else block

$( "button:nth-of-type(1)" ).click(function() {
  if($(this).text() == "Read Explanation") {
    $(this).text("Hide Explanation");
  } else {
    $(this).text("Read Explanation");
  }
  $(".explanation").toggleClass("hidden");
});      
.hidden{
 display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='explanation hidden'>Some explanation</div>
<button>Read Explanation</button>

Upvotes: 1

Related Questions