javascript 在鼠标悬停时隐藏其余部分

Question

我有 4 个 <li>，我喜欢它们成为链接图像的触发器。我在这里使用 javascript 而这个项目不允许 jQuery。请参考代码片段。

 var children = document.querySelectorAll('#resistorContent > section[id]');
 function showDetailContent(target) {
    // Simply loop over our children and ensure they are hidden:
    for (var i = 0, child; child = children[i]; i++) {
        child.style.display = 'none';
    }
    // Now, show our child we want to show
    document.getElementById(target).style.display = 'block';
}

/* Start Hidden, show first */
#resistorContent > section[id] {
    width: 940px;
    height: 400px;
    overflow: hidden;
    display:none;
}
#resistorContent > section[id]:first-child {
    display: block;
}

<div id="resistorContent">
  <section id="resistorDetail1"><img src="http://d3d71ba2asa5oz.cloudfront.net/40000483/images/pic1.jpg" alt=""></section>
  <section id="resistorDetail2"><img src="http://d3d71ba2asa5oz.cloudfront.net/40000483/images/pic2.jpg" alt=""></section>
  <section id="resistorDetail3"><img src="http://d3d71ba2asa5oz.cloudfront.net/40000483/images/pic3.jpg" alt=""></section>
  <section id="resistorDetail4"><img src="http://d3d71ba2asa5oz.cloudfront.net/40000483/images/pic4.jpg" alt=""></section>
    <ul>
      <li onmouseover="showDetailContent('resistorDetail1')">Hover 1!</li>
      <li onmouseover="showDetailContent('resistorDetail2')">Hover 2!</li>
      <li onmouseover="showDetailContent('resistorDetail3')">Hover 3!</li>
      <li onmouseover="showDetailContent('resistorDetail4')">Hover 4!</li>
    </ul>
  </div>
</section>

它在 jsfiddle 和这里的代码片段中工作得很好。但是如果你将它们粘贴到你的文本编辑器并在浏览器中预览它，它会呈现不同的结果。它创建了一堆所有 4 张图像，并且没有像 javascript 预期的那样隐藏图像。我在这里做错了什么？

提前致谢。

Answer 1

我相当确定问题是您正在将脚本加载到文档的 <head> 元素中。这会导致出现问题，因为您的脚本会尝试遍历 DOM 并进行更改，但如果您的脚本位于 <head> 标记中，它会在包含图像的 DOM 准备就绪之前执行.这就是为什么图像没有被隐藏而只是堆叠的原因。尝试运行关闭 </body> 标记之前的脚本。您的文件应该类似于此（但通常最好使用外部样式表和 link 到您的 javascript 文件）：

<!DOCTYPE html>
<html>
<head>
    <title>Testing DOM loading and script placement</title>
    <style type="text/css">
        /* Start Hidden, show first */
        #resistorContent > section[id] {
            width: 940px;
            height: 400px;
            overflow: hidden;
            display:none;
        }
        #resistorContent > section[id]:first-child {
            display: block;
        }
    </style>
</head>
<body>
    <div id="resistorContent">
        <section id="resistorDetail1"><img src="//placehold.it/940x450/5B696A/fff/&text=PIC+1" alt=""></section>
        <section id="resistorDetail2"><img src="//placehold.it/940x450/4D686B/fff/&text=PIC+2" alt=""></section>
        <section id="resistorDetail3"><img src="//placehold.it/940x450/415558/fff/&text=PIC+3" alt=""></section>
        <section id="resistorDetail4"><img src="//placehold.it/940x450/345658/fff/&text=PIC+4" alt=""></section>
            <ul>
                <li onmouseover="showDetailContent('resistorDetail1')">Hover 1!</li>
                <li onmouseover="showDetailContent('resistorDetail2')">Hover 2!</li>
                <li onmouseover="showDetailContent('resistorDetail3')">Hover 3!</li>
                <li onmouseover="showDetailContent('resistorDetail4')">Hover 4!</li>
            </ul>
        </section>
    </div>
    <script>
        var children = document.querySelectorAll('#resistorContent > section[id]');
        function showDetailContent(target) {
            // Simply loop over our children and ensure they are hidden:
            for (var i = 0, child; child = children[i]; i++) {
                child.style.display = 'none';
            }
            // Now, show our child we want to show
            document.getElementById(target).style.display = 'block';
        }
    </script>
</body>
</html>

这是一个不依赖平台的演示，在正确的位置插入 javascript：http://jsbin.com/qulajeroru/2/edit?html,output（单击 "Run with JS"）

javascript 在鼠标悬停时隐藏其余部分

javascript hide the rest of sections while onmouseover

javascript

html

hide

onmouseover