前面提到如何使用邏輯運算子來判斷顯示加號減號，這篇則是介紹其他方式，也就是使用 CSS 來動態將 HTML 元素隱藏起來。

visibility 與 display 的差異

首先，要先了解 visibility: hidden 與 display: none 這兩個的運用有什麼差異。

  • visibility: hidden：當隱藏元素時，原本的元素依然存在佈局中。
  • display: none：當隱藏元素時，該元素會在原本的佈局移除。

根據以上條件的不同，選擇使用 visibility: hidden 會是不錯的作法。

動態加入 CSS

在前面的筆記中有提到如何加入 inline-style，這邊就再加入邏輯運算子來判斷，當 count >= 10 就執行 visibility: hidden：

1
2
3
4
5
6
7
8
9
<div 
  className="plus"
  style={{
  	visibility: count >= 10 && "hidden"
  }}
  onClick={() => setCount(count + 1)}
>
	+
</div>

另外當 count < 1 就執行 visibility: hidden：

1
2
3
4
5
6
7
8
9
<div 
  className="minus"
  style={{
  	visibility: count < 1 && "hidden"
  }}
  onClick={() => setCount(count - 1)}
>
	-
</div>

可以試試看 CodePen，看看效果如何：

動態加入 class

除了動態加入 inline-style 以外，還可以動態加入 class 來顯示樣式，作法也差不多。

  1. 在 css 部份設定一個 class，並帶入樣式：
1
2
3
.hidden {
  visibility: hidden;
}
  1. 在加號減號部份加上動態 class 效果：
1
2
3
4
5
6
7
8
9
10
11
12
13
<div 
  className={`plus ${count >= 10 && 'hidden'}`}
  onClick={() => setCount(count + 1)}
>
	+
</div>

<div
  className={`minus ${count < 1 && 'hidden'}`}
  onClick={() => setCount(count - 1)}
>
  -
</div>

呈現的效果是一樣的，可以在 CodePen 玩玩看：