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

Question

我有一个非常基本的函数，通过向其添加一个类来显示 div onclick 的 :after 。

我想要实现的是，从第二次点击开始，: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>