クリックするとボタンの内容と色を変更します。

Question

http://www.lesha.wemakesites.ru/にモデルがあります。 プラスアイコンにフォーカスすると、「Follow me」ボタンに置​​き換えられます。 私がしたいのは、このボタンをクリックすると "アンフォロー"と表示される赤いボタンに変更することです。誰かがそれを逆転させる方法を知っているなら、 "Unfollow"ボタンがクリックされたときに、それが "Follow"になるようにすることは大変です。

Answer 1

プロジェクトでjqueryをプルします。これはcssだけでは達成できません。

HTMLコード

<button id="btn" class="btn-blue">Follow</button> 

CSSコード

.btn-blue { 
    background-color: blue; 
} 

.btn-red { 
    background-color: red; 
} 

Javascriptを

$('#btn').on('click', function() { 
    if (!$(this).hasClass("followed")) { 
     $(this).addClass("followed btn-red"); 
     $(this).removeClass("btn-blue"); 
     $(this).html("Followed"); 
    } else { 
     $(this).addClass("btn-blue"); 
     $(this).removeClass("followed btn-red"); 
     $(this).html("Follow"); 
    } 
}); 

できるだけシンプルなJSを理解するようにしてください。

Answer 2

私は、ボタンの2つのバージョンを持つことをお勧め、あなたが現在使用中でないもののために

display: none; 

を使用することができます。

ユーザーが次の状態に戻るときに、変数を状態に保存することができます。

let following = true; 
let btn = document.getElementById("btn"); 

if (!!following) { 
    btn.style.dispaly = "none"; 
    following = false; 
} else { 
    btn.style.display = "block"; 
    following = false; 
}