複雑な JavaScript を使用せずに、クリック時に画像を簡単に切り替えるにはどうすればよいですか?

クリック時の簡単な画像変更

クリック時の画像変更に関する質問は、過剰な JavaScript コードを使用しない単純なソリューションの必要性を強調しています。ここでは、HTML と JavaScript を活用して目的の結果を達成するアプローチを示します。

HTML マークアップ:

「id」属性を使用して各画像に一意の識別子を割り当てます:

<pre class="brush:php;toolbar:false">
<li><img alt="" src="image1.jpg">

JavaScript関数:

クリック時の画像の交換を処理する JavaScript 関数を作成します:

function swapImage(imageId) {
  var image = document.getElementById(imageId);
  if (image.src.endsWith(".jpg")) {
    image.src = image.src.replace(".jpg", ".png");
  } else {
    image.src = image.src.replace(".png", ".jpg");
  }
}

イベント処理:

「」を添付しますonclick" イベント リスナーを各画像に渡し、対応する画像を渡します。 ID:

<pre class="brush:php;toolbar:false">
<li><img alt="" src="image1.jpg">

機能:

画像をクリックすると、swapImage() 関数が呼び出され、画像の現在のファイル拡張子がチェックされます。 「.jpg」の場合、この関数はそれを「.png」に置き換え、事実上画像を変更します。 「.png」の場合、関数はプロセスを逆に実行し、「.jpg」に戻します。

このアプローチでは、HTML と JavaScript を利用して、追加の CSS クラスや疑似オブジェクトを必要とせず、ワンクリックで画像を変更します。セレクターを使用して、クエリに対するシンプルかつ効率的なソリューションを提供します。

以上が複雑な JavaScript を使用せずに、クリック時に画像を簡単に切り替えるにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。