リスト内の唯一の「アクティブ」項目を更新するにはどうすればよいですか?

Question

4 つの要素があるとします。そのうちの 1 つだけがクラス名 active を持つことができます。アクティブな要素は 1 秒間に数回更新されます (これはダミーの例です)。

簡単な方法は次のとおりです:

• 各要素から active
を削除します
• 現在選択されている要素に active を設定します

問題は、選択した要素 が変更されていない場合 であるため、クラス名を削除し、 クラス名をリセットすることになります (表示不具合を引き起こす可能性があります)。これでは意味がありません。 。

もちろん、要素がまだ選択されている場合は削除しないという別のルールを追加することもできますが、コードが読みにくくなります。

質問:

この問題を解決できる標準モードはありますか?

リーリー リーリー リーリー

Answer 1

要約

つまり、要素セットの active クラスを追加および削除する、よりエレガントな方法を探しているようですね。すべての要素から active クラスを削除して、現在アクティブな要素に追加し直すのではなく (これにより、潜在的な問題や視覚的な不具合が発生する可能性があります )。また、active クラスを削除/追加する必要があるかどうか (アクティブな要素が変更されていない場合は ) を確認するために、あまりにも多くのコードを追加するのを避けようとしているようです。

考えられる解決策

個人的には、これが最良のアプローチであるとは思いません (コードの実行に三項演算子を使用すると混乱する可能性があります)が、コードは十分にシンプルで全体的に非常に読みやすいと思います。

基本的に、コードをマージして、active クラスを追加または削除できます。 add() 関数は、要素にそのクラスが現在存在しない場合にのみクラスを追加しますが、remove() 関数はその逆を行います (クラスが存在する場合のみ削除します)。 。これは、アクティブな要素が変更されない場合、視覚的な不具合を心配することなく、アクティブな要素に対して add() 関数を呼び出すことができることを意味します。

このロジックを使用すると、すべての 可能な 要素をループするだけで済み、三項 演算子を使用して、要素が現在アクティブな要素であるかどうかを確認できます。その場合は、add() を呼び出します (アクティブな要素が変更されていない場合、これは効果がありません)。それ以外の場合は、remove() を呼び出します。

リーリー リーリー リーリー ＃＃＃予防＃＃＃

これは、すべての

可能な

アクティブ要素をループできることを前提としています。この場合、それらはすべて item で始まる id を持ちます。考えられるすべてのアクティブな要素をループするために使用できる識別子がなければ、より多くのコードを追加する必要があります。