javascript - 如何使用 Javascript(不是 jQuery)在单击时获取元素的属性(例如标题)？

Question

我正在探索一本书中的一些示例代码。该代码有一组缩略图，如下所示:

<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”。

Answer 1

您可以将元素传递给处理程序，并定义一个参数getImage。

onclick="getImage(this)"

<小时/>

或者更好的是，您可以.call处理程序，这样您仍然可以在getImage中使用this。

onclick="getImage.call(this)"

<小时/>

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