在第二次单击同一div时将文本添加到伪元素

Question

我有一个非常基本的功能，通过向其添加一个类来显示div :after的{​​{1}}。

我想要实现的是，从第二次点击开始，onclick将从＆＃34; THIS＆＃34;到＆＃34;和这个＆＃34;

任何暗示？
谢谢！

＆＃13;

＆＃13;

:after

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可以检查元素是否包含.open，如果是，则添加一个覆盖::after内容的新类

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;