Как заставить работать простую кнопку переключения, используя jQuery

Question

Я пытаюсь создать простую кнопку переключения, чтобы изменить классы элемента и его текста, содержащего элемент 'p'.

При первом щелчке это работает просто отлично, но потом это не ' t переключиться назад.

Что мне здесь не хватает?

$('.disclaimer').click(function() {
    if ($('#disclaimerText').text = "Disclaimer Declined") {
        $('.disclaimer').addClass("disclaimerAccepted");
        $('#disclaimerText').text("Disclaimer Accepted")
    } else {
        $('.disclaimer').removeClass("disclaimerAccepted");
        $('#disclaimerText').text("Disclaimer Declined")
    }
});

.disclaimer {
    font-family: 'Varela Round', sans-serif;
    font-weight: bold;
    font-size: 0.7vw;
    width: 15%;
    height: 50px;
    border-radius: 20px;
    background-color: #f96c8a;
    color: #545d7b;
}

.disclaimerAccepted {
    font-family: 'Varela Round', sans-serif;
    font-weight: bold;
    font-size: 0.7vw;
    width: 15%;
    height: 50px;
    border-radius: 20px;
    background-color: #30e83a;
    color: #545d7b;
}

#disclaimerText {
    display: block;
    margin: auto;
    font-size: 2vw;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="disclaimer">
    <p id="disclaimerText">Disclaimer Declined</p>
</div>

Answer 1

Вы ошибаетесь в text() вместо текста, и пропущено == вместо =, это оператор присваивания

Изменить с

if ($('#disclaimerText').text = "Disclaimer Declined") {

на

 if ($('#disclaimerText').text() == "Disclaimer Declined") {

$('.disclaimer').click(function() {
    if ($('#disclaimerText').text() == "Disclaimer Declined") {
    
        $('.disclaimer').addClass("disclaimerAccepted");
        $('#disclaimerText').text("Disclaimer Accepted")
    } 
    else {
       
        $('.disclaimer').removeClass("disclaimerAccepted");
        $('#disclaimerText').text("Disclaimer Declined")
    }
});

.disclaimer {
    font-family: 'Varela Round', sans-serif;
    font-weight: bold;
    font-size: 0.7vw;
    width: 15%;
    height: 50px;
    border-radius: 20px;
    background-color: #f96c8a;
    color: #545d7b;
}

.disclaimerAccepted {
    font-family: 'Varela Round', sans-serif;
    font-weight: bold;
    font-size: 0.7vw;
    width: 15%;
    height: 50px;
    border-radius: 20px;
    background-color: #30e83a;
    color: #545d7b;
}

#disclaimerText {
    display: block;
    margin: auto;
    font-size: 2vw;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="disclaimer">
    <p id="disclaimerText">Disclaimer Declined</p>
</div>

Answer 2

Вы можете использовать jQuery .toggleClass():

Добавить или удалить один или несколько классов из каждого элемента в наборе соответствующие элементы, в зависимости от наличия класса или значения аргумента состояния.

Обратите внимание: text - это метод jQuery, чтобы получить текст, который вы необходимо использовать .text(), а также вместо оператора присваивания (=), вы должны использовать оператор сравнения (== или ===) для сравнения текста:

$('.disclaimer').click(function() {
  $('.disclaimer').toggleClass("disclaimerAccepted");
  if ($('#disclaimerText').text() == "Disclaimer Declined") {        
    $('#disclaimerText').text("Disclaimer Accepted")
  } else {
    $('#disclaimerText').text("Disclaimer Declined")
  }
});

.disclaimer {
    font-family: 'Varela Round', sans-serif;
    font-weight: bold;
    font-size: 0.7vw;
    width: 15%;
    height: 50px;
    border-radius: 20px;
    background-color: #f96c8a;
    color: #545d7b;
}

.disclaimerAccepted {
    font-family: 'Varela Round', sans-serif;
    font-weight: bold;
    font-size: 0.7vw;
    width: 15%;
    height: 50px;
    border-radius: 20px;
    background-color: #30e83a;
    color: #545d7b;
}

#disclaimerText {
    display: block;
    margin: auto;
    font-size: 2vw;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="disclaimer">
  <p id="disclaimerText">Disclaimer Declined</p>
</div>