如何使用 CSS 和 JavaScript 在喜歡/不喜歡按鈕之間切換？

從一個按鈕切換到另一個按鈕意味著它允許使用者在一個視窗之間切換到另一個視窗，它允許啟用和停用某個功能，允許更改設定，並提供更多功能。

但在本文中，我們必須使用 CSS 和 JavaScript 編寫一個程式來在喜歡和不喜歡按鈕之間切換。

為此，讓我們為 HTML、CSS 和 JavaScript 建立三個單獨的檔案：

HTML 檔案 (index.html)

HTML 檔案用於建立按鈕、標題、標籤等。HTML 檔案必須使用.html 副檔名儲存。

以下是 HTML 程式碼：

index.html

<!DOCTYPE html>
<html lang="en">
<head>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
   <title>Toggle</title>
</head>
<body>
   <div class="toggle">
      <h3>Toggle between a like/dislike button with CSS and JavaScript?</h3>
      <p>click on the below button to toggle between the like and dislike button</p>
      <button id = 'btn'><i class = "fa fa-thumbs-up"></i></button>
      <div class="like">
         <span id = 'like'>Like<i class = "fa fa-thumbs-up"></i></span>
      </div>
      <div class="dislike">
         <span id = 'dislike'>Dislike<i class = "fa fa-thumbs-down"></i></span> 
      </div>
   </div>
</body>
</html>

CSS 檔案 (style.css)

這是 CSS 檔案，確保檔名必須使用 .css 副檔名儲存。在 CSS 中，我們將編寫程式碼來管理整個 HTML 頁面的樣式。

以下是將 CSS 檔案連線到 HTML 檔案的程式碼片段：

<link rel = ‘stylesheet’ href = ‘style.css’>

以下是 CSS 程式碼

style.css

*{
   padding: 0;
   margin: 0;
   box-sizing: border-box;
}

body{
   display: grid;
   place-items: center;
   height: 100vh;
   overflow-x: hidden;
}

.toggle{
   width: 500px;
   height: 300px;
   border: 5px solid black;
   border-radius: 10px;
}

h3{
   position: relative;
   top: 50px;
   left: 50px;
}

p{
   position: relative;
   top: 60px;
   left: 50px;
}

button{
   width: 100px;
   height: 100px;
   background-color: blue;
   color: white;
   border-radius: 50px;
   font-size: 60px;
   cursor: pointer;
   position: relative;
   left: 200px;
   top: 100px;
}

i{
   width: 100px;
   height: 100px;
   background-color: transparent;
   position: relative;
   top: 10px;
}

span{
   position: relative;
   top: 100px;
   color: green;
   font-weight: 800;
   font-size: 20px;
}

#dislike
{
   position: relative;
   left: 210px;
   color: red;
}

.like{
   position: relative;
   top: -80px;
   left: 50px;
}

.like i{
   position: relative;
   top: 0px;
   left: 10px;
}

.dislike{
   position: relative;
   top: -180px;
   left: 155px;
}

.dislike i{
   position: relative;
   top: 3px;
   left: 10px;
}

JavaScript 檔案 (index.js)

在 JavaScript 中，我們將編寫程式碼來管理切換活動，我們將獲取按鈕並應用一些切換條件。該檔案使用 .js 副檔名儲存。

以下是將 CSS 檔案連線到 HTML 檔案的程式碼片段：

<script src = ‘index.js’></script>

以下是 JavaScript 程式：

index.js

let like = document.querySelector('.fa');
document.getElementById('btn').style.background = 'blue';
like.addEventListener("click", (e)=> {
   let like = document.querySelector('.fa');
   e.target.classList.toggle("fa-thumbs-down");
});

示例

執行上述 HTML、CSS 和 JavaScript 後

<!DOCTYPE html>
<html lang="en">
<head>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
   <title>Toggle</title>
   <style>
   *{
         padding: 0;
         margin: 0;
         box-sizing: border-box;
      }

      body{
         display: grid;
         place-items: center;
         height: 100vh;
         overflow-x: hidden;
      }

      .toggle{
         width: 500px;
         height: 300px;
         border: 5px solid black;
         border-radius: 10px;
      }

      h3{
         position: relative;
         top: 50px;
         left: 50px;
      }

      p{
         position: relative;
         top: 60px;
         left: 50px;
      }

      button{
         width: 100px;
         height: 100px;
         background-color: blue;
         color: white;
         border-radius: 50px;
         font-size: 60px;
         cursor: pointer;
         position: relative;
         left: 200px;
         top: 100px;
      }

      i{
         width: 100px;
         height: 100px;
         background-color: transparent;
         position: relative;
         top: 10px;
      }

      span{
         position: relative;
         top: 100px;
         color: green;
         font-weight: 800;
         font-size: 20px;
      }

      #dislike
      {
         position: relative;
         left: 210px;
         color: red;
      }

      .like{
         position: relative;
         top: -80px;
         left: 50px;
      }

      .like i{
         position: relative;
         top: 0px;
         left: 10px;
      }

      .dislike{
         position: relative;
         top: -180px;
         left: 155px;
      }

      .dislike i{
         position: relative;
         top: 3px;
         left: 10px;
      }
   </style>
</head>
<body>
   <div class="toggle">
      <h3>Toggle between a like/dislike button with CSS and JavaScript?</h3>
      <p>click on the below button to toggle between the like and dislike button</p>
      <button id = 'btn'><i class = "fa fa-thumbs-up"></i></button>
      <div class="like">
         <span id = 'like'>Like<i class = "fa fa-thumbs-up"></i></span>
      </div>
      <div class="dislike">
         <span id = 'dislike'>Dislike<i class = "fa fa-thumbs-down"></i></span> 
      </div>
   </div>
   <script>
      let like = document.querySelector('.fa');
      document.getElementById('btn').style.background = 'blue';
      like.addEventListener("click", (e)=>
      {
         let like = document.querySelector('.fa');
         e.target.classList.toggle("fa-thumbs-down");
      });
   </script>
</body>
</html>

正如您在上述程式中看到的，我們使用了 HTML、CSS 和 JavaScript。透過 HTML，我們構建內容頁面的結構，CSS 管理整個 HTML 頁面的樣式。

在 JavaScript 中，我們獲取了透過查詢選擇器在 HTML 中建立的圖示。然後，我們使用了 addEventListener 方法和 e.target.classList.toggle 在喜歡和不喜歡按鈕之間切換。

更新於：2022年11月2日

2K+ 次檢視

開啟您的 職業生涯

透過完成課程獲得認證

開始學習
廣告