jqueryはクリック後の色の変更をキャンセルします

Web 開発では、一般的なインタラクティブ効果を実現するために 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 に設定されます。要素がクリックされた場合は、その背景色を赤に設定し、clicked 変数を false に設定します。

このように、要素をクリックすると、背景色が赤から青に変わります。

以下に示すように:

要素を再度クリックすると、背景色が青から赤に変わります。

以下に示すように:

3. 概要

jQuery を使用して要素の色の変更効果をキャンセルするのは非常に簡単です。クリックした後。要素がクリックされたかどうかを記録する変数を追加し、変数のさまざまな値に応じて jQuery を通じて要素の色を変更するだけです。この効果を使用して要素の状態をキャンセルし、ページをよりユーザーフレンドリーで直感的なものにすることができます。

以上がjqueryはクリック後の色の変更をキャンセルしますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。