我做了一個旋轉木馬，但我對影片很不滿意。如果我單擊右鍵，我希望它從右側滑動，如果我單擊左鍵，我希望它從左側滑動。所以我所做的是創建一個狀態const [classactive, setClassactive] = useState(false);并說 img 類是className={classactive == true ? "active-right" : "active-right-2"}. 我這樣做是為了讓影片繼續播放。CSS 上的類完全相同。所以，我想用左鍵做同樣的事情，但不是使用一個類，而是使用一個 ID，它確實有效，問題是右幻燈片影片停止了。我覺得我讓它比實際情況更復雜。img 是一個陣列，其中包含每張圖片的 src。
<div className="thumb">
<img
src={img[index]}
width="700px"
className={classactive == true ? "active-right" : "active-right-2"}
id={idactive == true ? "active-left" : "active-left-2"}
name="thumbs"
></img>
<div className="label">
<h1>{projectTitle[index]}</h1>
<p>{projectDesc[index]}</p>
</div>
</div>
uj5u.com熱心網友回復：
問題是 ID 選擇器比類具有更高的特異性，因此一旦您的 img 元素具有活動 ID，與該 ID 相關的 css 規則將超過 css 類。
一種方法是將classactive狀態值更改為表示變數類名而不是布林值的字串，并讓點擊處理程式確定該名稱。這樣您就不需要任何 ID，只需一個有狀態的類名。
遵循這種思路可能會變得非常混亂，但這并不是最復雜的解決方案。祝你好運??
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/445806.html
標籤：javascript css 反应
上一篇：使用按鈕關閉畫布