前と後の状態で異なるFAアイコンを持っている

同じボタンの前と後の状態で別のFAアイコンを使用したいと思います。言い換えれば、私はボタンを表示し、FAの「プラス」アイコンを表示します。それからボタンをクリックすると、新しい画面が表示されますが、同じボタンが画面上に残りますが、今は「近い」FAアイコンを表示するだけです。私のCSSで私はこれを持っています：前と後の状態で異なるFAアイコンを持っている

.shape:before { 
    content: "\f234"; 
    font-family: FontAwesome; 
    color:#fff; 
    position: absolute; 
    font-size: 30px; 
    top: 50%; 
    left: 50%; 
    } 

    .shape:after { 
    content: "\f00d"; 
    font-family: FontAwesome; 
    color:#fff; 
    position: absolute; 
    font-size: 30px; 
    top: 50%; 
    left: 50%; 
    }

しかし、ボタンが状態の前後にボタンを表示していることはどうなりますか？ボタンを使用する前にプラスアイコンを表示してから、ボタンが新しい画面を閉じる必要がある場合は、閉じるアイコンを表示するにはどうすればよいですか？

出典

2017-10-26 Schang

私はCSSがそのように論理を持つことはできないと思います。ボタンを押すようなイベントが発生し、そのイベントに何か応答してから、新しいスタイルでボタンを再描画する必要があります。 JSが当然の選択です。 – BrettJ

:beforeと:afterは定義されたクラスではなく、イベントにDOMに相対位置を指します。

、疑似要素（:beforeと:after）なし.shapeと.shape-openedのようなものを自分のクラスの名前を変更し、content財産
以外.shape-openedからすべてを削除切り替えるには、いくつかのJavaScriptを追加します。あなただけに必要

これらのクラス

何かのように：

<html> 
    <head> 
    <!-- ... --> 
    <style> 
     .shape { 
     content: "\f234"; 
     font-family: FontAwesome; 
     color:#fff; 
     position: absolute; 
     font-size: 30px; 
     top: 50%; 
     left: 50%; 
     } 
     .shape-opened { 
     content: "\f00d"; 
     } 
    </style> 

    <script> 
     toggleClass =() => { 
     // this assumes there's only one element with the class shape or that you only want the first one 
     // You could also use the javascript `event` object to get the current 
     var shape = document.getElementsByClassName('shape')[0]; 
     console.log(shape); 
     if (shape.classList.contains('shape-opened')) { 
      shape.classList.remove('shape-opened'); 
     } else { 
      shape.classList.add('shape-opened'); 
     } 
     } 
    </script> 
    </head> 
    <body> 
    <!-- ... --> 
    <div class="shape" onClick="toggleClass()"></div> 
    <!-- ... --> 
    </body> 
</html>

（私はconsole.logを投げていました。たとえば、コンテンツの変更がうまくいかなかった場合でもコンソールでクラスの切り替えができるようになりました。 FAとの依存関係の問題）

出典

2017-10-26 21:52:21

前と後の状態で異なるFAアイコンを持っている

答えて

関連する問題