1

私は本からいくつかのサンプルコードを調べています。コードには、次のようなサムネイルのセットがあります。

<div id="thumbnailPane">
  <img src="images/itemGuitar.jpg" alt="guitar" width="301" height="105" 
       title="itemGuitar" id="itemGuitar" />
  <img src="images/itemShades.jpg" alt="sunglasses" width="301" height="88" 
       title="itemShades" id="itemShades" />
  <img src="images/itemCowbell.jpg" alt="cowbell" width="301" height="126" 
       title="itemCowbell" id="itemCowbell" />
  <img src="images/itemHat.jpg" alt="hat" width="300" height="152" 
       title="itemHat" id="itemHat" />
</div>

サムネイルをクリックすると、次の機能で大きな画像が表示されます。

function initPage() {
  // find the thumbnails on the page
  thumbs = document.getElementById("thumbnailPane").getElementsByTagName("img");
  // set the handler for each image
  for (var i = 1; i < thumbs.length; i++) {//CHANGED FROM 0 TO 1
    image = thumbs[i];

    // create the onclick function
    image.onclick = function() {
      // find the image name
      detailURL = 'images/' + this.title + '-detail.jpg';
      document.getElementById("itemDetail").src = detailURL;
      getDetails(this.title);
    }
  }
}

私はそれがどのように機能するかを理解しています。私が疑問に思っているのは、ハードコードされた単一の関数でそれを複製できるかどうかです。onclick基本的に私が欲しいのは、イベントハンドラー（ ）で呼び出されるすべてのサムネイルに共通の単一の関数でクリックされたときにサムネイルのタイトルを取得することですonclick="getImage()"。

クリックしたばかりの要素のtitleまたはを取得するにはどうすればよいですか？id

私はjQueryを使用していないので、JSの回答が必要です。

編集：

getImage()私はこのような関数を書こうとしました：

function getImage(){
  var title = this.title;
  detailURL='images/' + title + '-detail.jpg';
  document.getElementById("itemDetail").src = detailURL;
}

これは機能しません。の値はvar titleです"undefined"。

4

3 に答える 3

1

要素をハンドラに渡し、パラメータを定義しますgetImage。

onclick="getImage(this)"

または、ハンドラーを使用したので、引き続きin を.call使用できます。thisgetImage

onclick="getImage.call(this)"

ただし、全体として、関数を再利用するためにインライン ハンドラーは必要ありません。名前付き関数を作成し、JavaScript コードに割り当てるだけです。それはうまくいくでしょう。

于 2012-11-16T23:53:19.980 に答える
0

iループで定義された関数への依存関係または関数内の依存関係がどこにあるのimageかわからないので、ループの外に移動して、すべてが同じものを共有するようにしないのはなぜですか？これが私があなたの関数を書く方法です

function initPage() {
    // remember to use var so you're not defining in the global scope
    var thumbs = document.getElementById('thumbnailPane').getElementsByTagName('img'),
        i = thumbs.length,
        getImage = function getImage() { // onclick function
            // again remember var
            var title = this.title,
                detailURL = 'images/' + title + '-detail.jpg';
            document.getElementById('itemDetail').src = detailURL;
            getDetails( title );
        };
    // Attach to each thumb
    while( i-- ) thumbs[i].addEventListener('click', getImage, false);
}


Qを編集します。試した機能が動かないのはなぜthis.titleですか？
A。 _ これは、thisそれを使用して関数またはオブジェクトを呼び出す方法によって、意味が異なるためです。関数を直接呼び出すと、ではなく、に（または呼び出し元、および）getImage()が設定されます。画像がそれ自体を呼び出すようにする（リスナーとして追加する）か、またはを最初の引数として使用する必要があります。thiswindowwindow.title === undefined<img>getImagegetImage.callgetImage.apply<img>

于 2012-11-17T00:14:54.257 に答える
0

イベントハンドラーの使用：

function clickHandler(){
    var title = this.title;
    ...
}

//assign handler to element
image.addEventListener('click',clickHandler);
于 2012-11-16T23:51:21.700 に答える