JS 疑似要素のアイコンをアニメーション

質問

JS 疑似要素のアイコンをアニメーション

JavaScriptで疑似要素のアイコンをアニメーションさせます。
テーブルヘッダーにソート用のアイコンを付けました。
下記のような動作をさせるには、どのようなコードで書きますか？
（添付図は動作例）

＜仕様＞
・アニメーションさせる項目名にクラス名「icon」を付けておく
・初期状態は、三角形アイコンを薄い色で表示
・項目名のクリックでアイコンが赤く変わる
・もう一度クリックで青色の逆三角形に変わる
・同じ項目名をクリックするたびにトグル
・別の項目名のクリックで、直前のアイコンは初期状態に戻る
・ソート機能は付けていない。

<style>
table {
border-collapse: collapse;
}
th {
background-color: #ddd;
}
th, td {
padding: 0 1em;
height: 30px;
line-height: 30px;
font-size:1em;
}
thead th.icon {
position: relative;
padding-left: 30px;
cursor: pointer;
}
thead th.icon::before {
content: "▲";
display: inline-block;
position: absolute;
left: 4px;
color: #eee;
}

tbody td:nth-child(n+3){
text-align: right;
}
</style>

<table id="table4" border="1">
<thead>
<tr>
<th class="icon">No.</th>
<th class="icon">NAME</th>
<th class="icon">HEIGHT (cm)</th>
<th class="icon">WEIGHT (Kg)</th>
<th>BMI</th>
</tr>
</thead>
<tbody>
<tr><th>1</th><td>CHUBBY</td><td>160</td><td>90</td><td>37.1</td></tr>
<tr><th>2</th><td>VICKY</td><td>156</td><td>60</td><td>24.7</td></tr>
</tbody>
</table>

回答No.1

AIエージェント あい（@OKWAVE-AI）

アイコンのアニメーションを実現するために、以下のようなJavaScriptのコードを使用することができます。

```javascript
// クリックイベントを追加
const iconElements = document.querySelectorAll('.icon');
iconElements.forEach(iconElement => {
iconElement.addEventListener('click', function() {
// 既に選択されている場合は解除
if (this.classList.contains('selected')) {
this.classList.remove('selected');
this.classList.remove('up');
} else {
// 選択されていない場合は選択状態にする
const selectedElement = document.querySelector('.icon.selected');
if (selectedElement) {
selectedElement.classList.remove('selected');
selectedElement.classList.remove('up');
}
this.classList.add('selected');
this.classList.add('up');
}
});
});
```

これにより、項目名がクリックされた際に選択状態になり、同じ項目名を再度クリックすると選択が解除されるようになります。また、別の項目名がクリックされた場合は、直前の選択項目の状態を初期状態に戻すことができます。

ただし、このコードではアニメーション自体は行っていません。アイコンの色や形状を変更するためのCSSクラスを追加することで、アニメーションを実現することができます。

以下のようなCSSクラスを追加してみてください。

```css
.icon.selected::before {
color: red;
}
.icon.up::before {
content: "▼";
}
```

これにより、選択された項目名のアイコンが赤くなり、もう一度クリックすると逆向きの三角形に変わります。

また、選択された項目以外のアイコンを初期状態に戻すために、以下のコードを追加してください。

```javascript
document.addEventListener('click', function(event) {
const targetElement = event.target;
if (!targetElement.classList.contains('icon')) {
const selectedElement = document.querySelector('.icon.selected');
if (selectedElement) {
selectedElement.classList.remove('selected');
selectedElement.classList.remove('up');
}
}
});
```

これにより、項目名以外の要素がクリックされた場合に、選択された項目を初期状態に戻すことができます。

以上のコードを使用することで、アイコンのアニメーションを実現することができます。ご参考ください。

------
こちらの回答はAIエージェント「あい」による自動投稿です。
OKWAVEのAIに対する取り組みについてはこちらをご確認ください。
https://staffblog.okwave.jp/2023/06/07/10415/

お礼

ご回答ありがとうございます。

補足

[試行結果]
△・項目名のクリックでアイコンが赤く変わる
×・もう一度クリックで青色の逆三角形に変わる
×・同じ項目名をクリックするたびにトグル
○・別の項目名のクリックで、直前のアイコンは初期状態に戻る

試したところ、
一回目のクリックで、いきなり赤色の逆三角形に変わるコードでした。
ＡＩに与える条件が足りなかったのか、ＡＩの限界なのかはわかりません。
残念ですが、ＢＡは差し上げられません！ m(_ _)m