0

私はJavaScriptの初心者で、何時間も多くのことを試しましたが、何もうまくいきませんでした.

サムネイルをクリックすると大きな画像に変わります。

今まで、次のスクリプトを取得しました。それほど多くはありません... :-(

<script type="text/javascript">
    function changeImage() {
        document.getElementById("img").src="img/upload/test1.jpg";
    }
</script>

<img id="img" name="change" src="img/upload/test.jpg">
<img src="img/thumbnail/test.jpg" alt="" id="imgClickAndChange" onclick="changeImage()">
<img src="img/thumbnail/test1.jpg" alt="" id="imgClickAndChange" onclick="changeImage()">

すべての全体像は の下にsrc"img/upload/xxx.jpg"あり、すべてのサムネイルは の下にありsrc="img/thumbnail/xxx.jpg"ます。サムネイルをクリックすると、全体像を変更する必要があり、javascript でパラメーターを指定する必要があります。のようにonclick="changeImage(xxx.jpg)。

問題は、すべてのページに他の写真があることです。データベースから取得します。つまり、写真の名前は変数のようなものです。お分かりできると良いのですが。説明するのは難しいです。:-(

事前にご協力いただきありがとうございます。

ヤニックに挨拶

4

2 に答える 2

1
  1. ID を一意に保ちます。DOM 要素は、すべての実際的な理由から、一意の ID を持つ必要があります。
  2. インラインで onclick を実行することもできますが、それを進めるためのより良い方法は次のようなものです。

クライアントまたはサーバーのいずれかのテンプレート ライブラリから生成された画像があると仮定すると、画像ソースと共通クラスを含むデータ属性をこれらすべての要素にすぐに追加し、Javascript からイベント リスナーを追加して、一致する要素にバインドします。クラスと data 属性を取得して、画像ソースを置き換えます。

于 2013-08-06T07:58:25.937 に答える