Javascript 関数で classList を使用して CSS クラスを追加しますが、最新のクラスが優先されないためスタイルが競合します。

Question

私の関数は画面上に表示されているカードの数を数えます。すべてが表示されている場合は、arrow-up クラスをアイコンに追加します。一部のカードがまだユーザーに表示されていない場合は、矢印により、-down アイコンが追加されます。

リーリー リーリー

これは機能しますが、最初に arrow-down クラスが追加されたため、予想通り、正しいクラスが span に追加されていることが DOM で確認できます。 (表示されているすべてのカードが表示される前に、ユーザーはコンテンツを複数回展開する必要があります) - その後、arrow-up クラスが追加されますが、arrow-down はオーバーライドされません。 。 p>

arrow-up が追加されたときに arrow-down が削除され、またその逆になるようにするにはどうすればよいですか?以前に toggle を使用して単純な開閉アイコンを実装しましたが、閉じる前に複数回展開される可能性があるため、これは機能しません。

Answer 1

不要になったコースを削除することをお勧めします:

リーリー

Answer 2

カスケードでは多くの要素が考慮されます a>。これは、2 つの矛盾するルールが同じ要素に適用された場合に、どちらのルールが「勝つ」かを決定するために使用される一連のルールです。

HTML 要素 でクラスが定義される順序は、これらの要素の 1 つではありません。

と

は、カスケードに関する限り同じです。

---

適用すべきでない クラスを削除します。

リーリー

または、方向を変更するために 1 つのクラスのみを考慮する方法で CSS を作成します。

リーリー ＃＃＃それから＃＃＃ リーリー