카테고리 없음

HTML5 - 박스 클릭 시 색상 및 A,B,C 순으로 변경 - jquery

artra 2023. 7. 4. 15:15
반응형
박스 색상 및 문자 변경
A

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>박스 색상 및 문자 변경</title>
  <style>
    .box {
      width: 50px;
      height: 50px;
      background-color: red;
      display: flex;
      justify-content: center;
      align-items: center;
      font-weight: bold;
      cursor: pointer;
    }
  </style>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <div class="box" id="box">
    <span id="letter">A</span>
  </div>
  <script>
    /* 클릭 이벤트를 처리하는 함수 */
    function toggleBox() {
      // 현재 박스의 문자 값을 가져옵니다.
      const currentLetter = $('#letter').text();
      
      // 박스의 스타일을 변경하기 위해 박스 요소의 참조를 가져옵니다.
      const box = $('#box');
      
      if (currentLetter === 'A') {
        $('#letter').text('B');
        box.css('background-color', 'green');
      } else if (currentLetter === 'B') {
        $('#letter').text('C');
        box.css('background-color', 'blue');
      } else {
        $('#letter').text('A');
        box.css('background-color', 'red');
      }
    }
 
    // onClick 이벤트 리스너를 설정합니다.
    $('#box').on('click', toggleBox);
  </script>
</body>
</html>
cs
반응형
저작자표시 비영리 변경금지 (새창열림)