將文本添加到第二次點擊相同的div上的僞元素

我有一個非常基本的功能，通過向它添加一個類來顯示div onclick的:after。將文本添加到第二次點擊相同的div上的僞元素

所有我想要實現的是，從第二點擊，則:after會從「本」改變「而這種」

任何提示？
謝謝！

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

來源

2017-07-14 Federico

你不能直接操縱僞元素的內容，但你可以e內容引用一個數據屬性，然後操作：https://stackoverflow.com/questions/5041494/selecting-and-manipulating-css-pseudo-elements-such-as-before-and-after-usin – Jeremy

您可以檢查，看看是否該元素具有.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>

來源

2017-07-14 22:20:32

將文本添加到第二次點擊相同的div上的僞元素

回答

相關問題