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)"

或者更好的是，你.call有处理程序，所以你仍然可以使用thisin getImage。

onclick="getImage.call(this)"

但总的来说，您不需要内联处理程序来重用函数。只需创建一个命名函数，并在您的 JavaScript 代码中分配它。它会起作用的。

于 2012-11-16T23:53:19.980 回答
0

事件处理程序的使用：

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

//assign handler to element
image.addEventListener('click',clickHandler);
于 2012-11-16T23:51:21.700 回答
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？
一个。这是因为this根据您调用函数或使用它的对象的方式，这意味着不同的东西。直接调用你的函数getImage()将设置this为window（或调用者和window.title === undefined），而不是你的<img>. 您必须使图像getImage自身调用（添加为侦听器）或使用orgetImage.call作为第一个参数。getImage.apply<img>

于 2012-11-17T00:14:54.257 回答