Изменить и изменить текст в кнопке jquery

менять

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

к

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

демо:

$("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) - это объект jquery с атрибутом text(), а this - чистый js. объект без атрибута text или text() в этом случае.

2. = - оператор присваивания, а === - операторы сравнения.

В вашем коде есть несколько проблем:

1. this должен быть $(this)
2. text должен быть text()
3. Вы используете оператор присваивания в условии if. Это должен быть оператор сравнения == или оператор строгого сравнения ===.
4. Вы можете переключить класс hidden вне блока if-else

$( "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>

вы не можете принимать решения на основе данных, которые могут измениться. если текст кнопки изменится, вам нужно будет изменить свой код. таким образом, если текст кнопки изменится, вам нужно будет изменить свои данные. Это не лучший вариант, но может сработать.

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]);
});

Спасибо всем. Это кажется самым простым / близким к тому, что у меня было. Я изменил, как предложил Анкит: это к $ (это) текст в текст () = к == Использование - fade out - вместо - hide - помогло

    $( "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() {
    });
    }
});