広範な JavaScript を使用せずにクリック時に画像を変更するにはどうすればよいですか?

クリック時に画像を変更する: シンプルなアプローチ

クリック イベント時に画像を動的に交換するタスクに直面した場合、最初は次のような手段に頼るかもしれません。 JavaScript または jQuery を使用すると、迅速な解決策が得られます。ただし、より単純なシナリオの場合は、大規模な JavaScript コードの必要性を回避する代替手段があります。

画像を簡単に変更するには、以下に示すように、画像要素に一意の ID を追加することを検討してください。

<ul>
  <li><img src="image1.png">

次に、クリック時の画像交換を処理する簡単な JavaScript 関数を作成します。

function changeImage(image) {
  // Get the current image source
  let currentSrc = image.src;

  // Replace the source with the new image
  const newSrc = currentSrc.replace(".png", "_colored.png");
  image.src = newSrc;
}

この関数では、現在の画像ソースが取得され、そのソースに「_coloured」が含まれる新しいソースに置き換えられます。 name.

最後に、onclick イベント リスナーを各画像に追加して、クリックされたときに changeImage() 関数を呼び出します。

<ul>
  <li><img src="image1.png">

このアプローチを使用すると、クリック時に画像をシームレスに切り替えることができます。複雑な JavaScript または疑似セレクターが必要です。

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