Question

所以我对Web Design很陌生，并且在让我的click事件处理程序工作时遇到问题。我无法更改html或css文件。我的任务是为我的缩略图设置一个点击处理程序，以放大<figure>元素中img中的图像。同时还将图中的figcaption文本设置为thumbs title属性。我需要附加到div id =缩略图。我的脚本没有放大我的缩略图或标题。

这是我创建的HTML文档：

        <!DOCTYPE html>
        <html lang="en">
        <head >
        <meta charset="utf-8">
        <title>Chapter 9 - Share Your Travels</title>
        <link rel="stylesheet" href="css/styles.css" />
        <script type="text/javascript" src="js/chapter09-project02.js">
        </script>   
`      `</head>
        <body>
        <header>
        <h2>Share Your Travels</h2>
        <nav><img src="images/menu.png"></nav>
        </header>
        <main>
        <figure id="featured">
        <img src="images/medium/5855774224.jpg" title="Battle" />
        <figcaption>Battle</figcaption>
        </figure>
        <div id="thumbnails">
        <img src="images/small/5855774224.jpg" title="Battle"/>
        <img src="images/small/5856697109.jpg" title="Luneburg"/>
        <img src="images/small/6119130918.jpg" title="Bermuda" />
        <img src="images/small/8711645510.jpg" title="Athens" />
        <img src="images/small/9504449928.jpg" title="Florence" />
        </div>

        </main>
        </body>
        </html>

Js脚本：

       var thumbs = document.getElementById("thumbnails");
       thumbs.addEventListener("click", function (e) {

       if (e.target.nodeName.toLowerCase() == 'img') {
            var clickedImageSource = e.target.src;


       var newSrc = clickedImageSource.replace("small", "medium");           


       var featuredImage = document.querySelector("#featured img");
       featuredImage.src = newSrc;
       featuredImage.title = e.target.title;

        }

        });

       var img = document.getElementById("figcaption");
       img.addEventListener("mouseover",function (event) {
       img.className = "featured figcaption";
       });
       img.addEventListener("mouseout", function (event) {
       img.className = "featured figcaption";

       var element = document.getElementById('figcaption');
       element.style.opacity = "0.9";
       element.style.filter  = 'alpha(opacity=0%)';


        });

感谢您的任何建议，希望我能为其他人支付费用！

Answer 1

我认为它会导致你的问题。 JS是getElementById，但没有ID是调用figcaption。

var img = document.getElementById("figcaption");

Answer 2

问题是您尝试使用getElementById查找ID为figcaption的内容;页面上没有任何内容的ID为figcaption，因此getElementById会返回null。

有几种方法可以解决它：

在<figcaption>元素中添加ID：<figcaption id="figcaption">
使用getElementById：getElementsByTagName，而不是使用document.getElementsByTagName('figcaption')[0];。（getElementsByTagName总是返回一个元素集合，[0]抓取第一个元素，在这种情况下只有一个元素集合。
不要使用getElementById，而是像使用querySelector一样找到特色图片元素：document.querySelector("#featured figcaption");

使用querySelector的最后一种方法是我在这种情况下推荐的方法;其他时候，最好在元素中添加一个id。

const thumbs = document.getElementById("thumbnails");
const featuredImage = document.querySelector("#featured img");
const caption = document.querySelector("#featured figcaption");

thumbs.addEventListener("click", function (e) {

  if (e.target.nodeName.toLowerCase() == 'img') {
    var clickedImageSource = e.target.src;
    
    // for the purposes of this demo, I'm using a placeholder
    // image service so I need to change the size slightly differently
    let newSrc = clickedImageSource.replace("50x50", "350x150");
    //var newSrc = clickedImageSource.replace("small", "medium");

    featuredImage.src = newSrc;
    caption.textContent = e.target.title;
  }
});


caption.addEventListener("mouseover",function (event) {
  caption.className = "featured figcaption";
});
caption.addEventListener("mouseout", function (event) {
  caption.className = "featured figcaption";
  // I changed the value to .5 instead of .9 because with such small
  // text the opacity change is barely perceivable.
  caption.style.opacity = "0.5";
  // This is not needed, this was the old way IE used to do it,
  // IE < 9 needed it, but IE < 9 is no longer relevant. Just use opacity.
  //element.style.filter  = 'alpha(opacity=0%)';
});

<header>
  <h2>Share Your Travels</h2>
  <nav><img src="http://via.placeholder.com/50x50?text=Menu"></nav>
</header>
<main>
  <figure id="featured">
    <img src="http://via.placeholder.com/350x150" title="Battle">
    <figcaption>Battle</figcaption>
  </figure>
  <div id="thumbnails">
  <img src="http://via.placeholder.com/50x50" title="Battle">
  <img src="http://via.placeholder.com/50x50/ff0000/ffffff" title="Luneburg">
  <img src="http://via.placeholder.com/50x50/00ff00/ffffff" title="Bermuda">
  <img src="http://via.placeholder.com/50x50/0000ff/ffffff" title="Athens">
  <img src="http://via.placeholder.com/50x50/000000/ffffff" title="Florence">
  </div>
</main>

有关我的版本的一些注意事项，我使用let和const代替var。这些天{{}}和let都得到了很好的支持，除非您需要支持非常旧的浏览器，否则应该使用var代替<img>。我也只查询标题和特色图像元素一次，并将它们存储在点击处理程序上方的范围内，这允许点击处理程序内的代码通过const访问它们。这使得所有内容都更加高效，因为每次单击处理程序运行时您都不必查询DOM来查找它们。在这种情况下，性能提升没有实际意义，但养成尽可能高效编写代码的习惯是很好的，这样你就不必在它重要时考虑它。

图片为closure，这意味着它们不能包含任何内容，因此您不需要结束标记。出于这个原因，我使用了<img />个标记而不是void elements <script>个标记。 self-closing只需要自动关闭图像，因为它是XHTML，其语法比HTML更严格。另外需要注意的是，mouseover标记上的XML，只占用了额外的空间，并没有真正做任何事情。

我不明白您尝试使用mouseout和featured处理程序做什么。目前您的代码所做的是：

当鼠标移过标题时，figcaption和featured类会添加到标题中。
当鼠标离开标题时，figcaption和0.9类会再次添加到标题中，并且其不透明度将永久设置为{{1}}。

我在我的例子中清理了一点，以便更明显地发现正在发生的事情。

JavaScript事件处理程序单击缩略图以放大图像

2 个答案: