Question

以下是“DOM脚本：使用JavaScript和文档对象模型进行Web设计”一书中的示例。我不知道为什么它不起作用。当我单击列表时，应在占位符中更改图片。但现在他们只在窗口打开了。

谢谢！

window.onload = prepareGallery;

function prepareGallery() {
  if (!document.getElementsByTagName) return false;
  if (!document.getElementById) return false;
  if (!document.getElementById("imagegallery")) return false;
  var gallery = document.getElementById("imagegallery");
  var links = gallery.getElementsByTagName("a");
  for (var i = 0; i < links.length; i++) {
    links[i].onclick = function() {
      return showPic(this) ? false : true;
    }
  }
}

function showPic(whichpic) {
  if (!document.getElementById("placeholder")) return false;
  var source = whichpic.getAttribute("href");
  var placeholder = document.getElementById("placeholder");
  if (placeholder.nodeNae != "IMG") return false;
  placeholder.setAttribute("src", source);
  if (document.getElementById("description")) {
    var text = whichpic.getAttribute("title") ? whichpic.getAttribute("title") : "";
    if (description.firstChild.nodeType == 3) {
      description.firstChild.nodeValue = text;
    }
  }

  return true;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Image Gallery</title>
</head>

<body>
  <h1>Snapshots</h1>
  <ul id="imagegallery">
    <li><a href="http://s3images.coroflot.com/user_files/individual_files/large_288252_bhfwqijyyfzgpexgwvpkkqc7v.jpg" title="Flower in Spring">Flower</a></li>
    <li><a href="http://s3images.coroflot.com/user_files/individual_files/large_288252_yh5i09po53igg59opdscqeauf.jpg" title="Building">Building</a></li>
    <li><a href="http://s3images.coroflot.com/user_files/individual_files/large_288252_8_vmhpdnbefvxhlof0lgdwot6.jpg" title="Snow in a cold day">Cold Day</a></li>
    <li><a href="http://s3images.coroflot.com/user_files/individual_files/large_288252_ugfgxkpb_8un6pz2ljeuzmmws.jpg" title="Beautiful Sunset">Sunset</a></li>
  </ul>
  <p id="description">Choose an Image.</p>
  <img src="images/placeholder.png" alt="my image gallery" id="placeholder" style="border: 2px solid #eaeaea">


</body>
</html>

Answer 1

所以我查了一下电子书。我不想买它来回答问题，但是我看了source code，但是找不到你正在使用这段代码的章节。从它的外观来看，我只能猜测你是在第6章，所以看看那一章的example JS script，它运作正常。此外，您的代码“documnet”第38行上的语法错误应该是 document 。本来可以作出评论，但不能。

Answer 2

问题是if (placeholder.nodeNae != "IMG") return false; nodeNae应为nodeName。不知道为什么该片段不会引发错误。

＆＃13;

window.onload = prepareGallery;

function prepareGallery() {
  if (!document.getElementsByTagName) return false;
  if (!document.getElementById) return false;
  if (!document.getElementById("imagegallery")) return false;
  var gallery = document.getElementById("imagegallery");
  var links = gallery.getElementsByTagName("a");
  for (var i = 0; i < links.length; i++) {
    links[i].onclick = function() {
      return showPic(this) ? false : true;
    }
  }
}

function showPic(whichpic) {
  if (!document.getElementById("placeholder")) return false;
  var source = whichpic.getAttribute("href");
  var placeholder = document.getElementById("placeholder");
  if (placeholder.nodeName != "IMG") return false;
  placeholder.setAttribute("src", source);
  if (document.getElementById("description")) {
    var text = whichpic.getAttribute("title") ? whichpic.getAttribute("title") : "";
    if (description.firstChild.nodeType == 3) {
      description.firstChild.nodeValue = text;
    }
  }

  return true;
}

＆＃13;

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Image Gallery</title>
</head>

<body>
  <h1>Snapshots</h1>
  <ul id="imagegallery">
    <li><a href="http://s3images.coroflot.com/user_files/individual_files/large_288252_bhfwqijyyfzgpexgwvpkkqc7v.jpg" title="Flower in Spring">Flower</a></li>
    <li><a href="http://s3images.coroflot.com/user_files/individual_files/large_288252_yh5i09po53igg59opdscqeauf.jpg" title="Building">Building</a></li>
    <li><a href="http://s3images.coroflot.com/user_files/individual_files/large_288252_8_vmhpdnbefvxhlof0lgdwot6.jpg" title="Snow in a cold day">Cold Day</a></li>
    <li><a href="http://s3images.coroflot.com/user_files/individual_files/large_288252_ugfgxkpb_8un6pz2ljeuzmmws.jpg" title="Beautiful Sunset">Sunset</a></li>
  </ul>
  <p id="description">Choose an Image.</p>
  <img src="images/placeholder.png" alt="my image gallery" id="placeholder" style="border: 2px solid #eaeaea">


</body>
</html>

＆＃13;

这段代码看起来已经过时了，所以我要写一个更新的代码。

const是一个块范围的变量，不能更改值，也不能重新声明。 Docs

.querySelector和.querySelectorAll分别返回匹配节点的DOM对象或NodeList。 Docs

由于gallery_images是NodeList，这意味着我们可以使用.forEach对其进行迭代。在forEach我使用Arrow Function作为将事件监听器分配给a元素的简写。

.forEach(image => image.addEventListener('click', showImage))与.forEach(function() { this.addEventListener('click', showImage); }相同。

如果有什么令人困惑的话，我可以尝试再澄清一下。我已将其与文档相关联，以获取更多信息。

＆＃13;

const gallery = document.querySelector('#imagegallery');
const gallery_images = document.querySelectorAll('#imagegallery a');
const placeholder = document.querySelector('#placeholder');

gallery_images.forEach(image => image.addEventListener('click', showImage));

function showImage(event) {
  event.preventDefault(); // Stop the link from opening
  const source = this.href;
  const title = this.title;
  placeholder.src = source;
  placeholder.alt = title;
}

＆＃13;

<h1>Snapshots</h1>
<ul id="imagegallery">
  <li><a href="http://s3images.coroflot.com/user_files/individual_files/large_288252_bhfwqijyyfzgpexgwvpkkqc7v.jpg" title="Flower in Spring">Flower</a></li>
  <li><a href="http://s3images.coroflot.com/user_files/individual_files/large_288252_yh5i09po53igg59opdscqeauf.jpg" title="Building">Building</a></li>
  <li><a href="http://s3images.coroflot.com/user_files/individual_files/large_288252_8_vmhpdnbefvxhlof0lgdwot6.jpg" title="Snow in a cold day">Cold Day</a></li>
  <li><a href="http://s3images.coroflot.com/user_files/individual_files/large_288252_ugfgxkpb_8un6pz2ljeuzmmws.jpg" title="Beautiful Sunset">Sunset</a></li>
</ul>
<p id="description">Choose an Image.</p>
<img src="images/placeholder.png" alt="my image gallery" id="placeholder" style="border: 2px solid #eaeaea">

＆＃13;

简单幻灯片页面的Javascript代码无效

2 个答案: