jquery는 클릭 후 색상 변경을 취소합니다.

웹 개발에서 jQuery는 흔히 몇 가지 일반적인 대화형 효과를 얻기 위해 사용됩니다. 그 중 클릭 후 요소의 색상이 변경되는 것은 일반적인 인터랙티브 효과입니다. 그러나 어떤 경우에는 클릭 시 요소의 색상 변경을 취소해야 합니다. 이 기사에서는 jQuery를 사용하여 클릭 후 변색 효과를 취소하는 방법을 소개합니다.

1. 클릭 후 요소 색상 변경

먼저 jQuery를 사용하여 클릭 후 요소 색상을 변경하는 방법을 살펴보겠습니다.

HTML 코드는 다음과 같습니다.

<div class="box">点击我变色</div>

CSS 스타일은 다음과 같습니다.

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  color: white;
  text-align: center;
  line-height: 100px;
  cursor: pointer;
}

1단계: 이 div 요소에 클릭 이벤트를 추가하고 클릭 시 jQuery를 통해 배경색을 변경합니다.

$('.box').click(function() {
  $(this).css('background-color', 'blue');
});

2단계: 이런 식으로 div 요소를 클릭하면 배경색이 파란색으로 변경됩니다.

아래 그림과 같이:

2. 클릭 후 요소의 색상 변경을 취소합니다.

다음으로 jQuery를 사용하여 클릭 후 요소를 취소하는 색상 변경 효과를 얻는 방법을 소개합니다.

HTML 코드와 CSS 스타일은 위와 동일합니다.

1단계: 요소를 클릭했는지 확인하려면 변수를 추가해야 합니다.

var clicked = false;

$('.box').click(function() {
  if(!clicked) {
    $(this).css('background-color', 'blue');
    clicked = true;
  }
});

2단계: 클릭 이벤트 기능을 수정합니다. 요소를 클릭하면 jQuery를 통해 해당 요소의 색상이 초기 색상으로 복원됩니다.

var clicked = false;

$('.box').click(function() {
  if(!clicked) {
    $(this).css('background-color', 'blue');
    clicked = true;
  } else {
    $(this).css('background-color', 'red');
    clicked = false;
  }
});

위 코드에서 볼 수 있듯이 요소를 클릭하면 이전에 클릭한 적이 없는 경우 배경색이 파란색으로 설정되고 클릭된 변수가 true로 설정됩니다. 요소를 클릭한 경우 배경색을 빨간색으로 설정하고 클릭된 변수를 false로 설정합니다.

이렇게 하면 요소를 클릭하면 배경색이 빨간색에서 파란색으로 변경됩니다.

아래 그림과 같이:

요소를 다시 클릭하면 배경색이 파란색에서 빨간색으로 변경됩니다.

아래 그림과 같이:

3. 요약

jQuery를 사용하여 클릭 후 요소의 색상 변경 효과를 취소하는 것은 매우 간단합니다. 요소가 클릭되었는지 여부를 기록하는 변수를 추가한 다음 변수의 다양한 값에 따라 jQuery를 통해 요소의 색상을 변경하기만 하면 됩니다. 이 효과를 사용하면 요소의 상태를 취소하여 페이지를 더욱 사용자 친화적이고 직관적으로 만들 수 있습니다.

위 내용은 jquery는 클릭 후 색상 변경을 취소합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!