同じdivの2回目のクリックで擬似要素にテキストを追加

Question

クラスを追加することによって:afterのdiv onclickを示す非常に基本的な機能があります。

私が達成したいすべてが第二の上をクリックし、ということで、:afterは「THIS」の「AND THIS」

任意のヒントから変更するのでしょうか？
ありがとうございます！

$(document).on("click","#click",function(){$("#logo").addClass("open")});

#click{cursor:pointer} 
 
#logo.open:after{content:" THIS"}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="click">CLICK HERE</div><br> 
 
<div id="logo">SHOT</div>

Answer 1

あなたは要素が.openを持っているかどうかをチェックし、もしそうであれば、::afterコンテンツ

var $logo = $('#logo'); 
 
$(document).on("click","#click",function(){ 
 
    if ($logo.hasClass('open')) { 
 
    $logo.addClass('and'); 
 
    } else { 
 
    $logo.addClass('open'); 
 
    } 
 
});

#click{cursor:pointer} 
 
#logo.open::after{content:" THIS"} 
 
#logo.and::after{content:" AND THIS"}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="click">CLICK HERE</div><br> 
 
<div id="logo">SHOT</div>