通过悬停 ul li 来切换图片

Question

我只需要 javascript 解决方案。请参考this demo。

目标是将点悬停在右下角并相应地交换图像。但是它现在所做的是悬停时显示空白页面，并且整个 ul 变为垂直并转到左上角。我这里做错了什么？？？

HTML:

<div id="wrapper">  
        <section id="contentWrapper">   
                <div id="resistorContent" class="content">
                    <section id="resistorDetail1"><img src="http://d3d71ba2asa5oz.cloudfront.net/40000483/images/pic1.jpg"></section>
                    <section id="resistorDetail2"><img src="http://d3d71ba2asa5oz.cloudfront.net/40000483/images/pic2.jpg"></section>
                    <section id="resistorDetail3"><img src="http://d3d71ba2asa5oz.cloudfront.net/40000483/images/pic3.jpg"></section>
                    <section id="resistorDetail4"><img src="http://d3d71ba2asa5oz.cloudfront.net/40000483/images/pic4.jpg"></section>
                    <ul>
                        <li onMouseOver="showDetail(resistorDetail1)"></li>
                        <li onMouseOver="showDetail(resistorDetail2)"></li>
                        <li onMouseOver="showDetail(resistorDetail3)"></li>
                        <li onMouseOver="showDetail(resistorDetail4)"></li>
                    </ul>
                </div>
        </section>
    </div>

JAVASCRIPT:

<script type="text/javascript">
                    var children = document.querySelectorAll('.content > section[id]')
                    function showDetail(target){
                        for (var i = 0, child; child = children[i]; i++) {
                        child.style.display = 'none';
                        }
                    document.getElementById(target).style.display = 'block';
                    }
                </script>

可能发生碰撞CSS ?:

.content section:not(:first-child) {
    display: none;
}

提前致谢！！

Answer 1

TL;DR

这是工作 fiddle：https://jsfiddle.net/2qz2srqs/3/

原因

您的代码非常接近，但有一些小问题。

第一个是复制粘贴错误，您有两个 ID 为 resistorDetail3 的元素。

其次，onmouseover 事件的语法不正确。在任何 javascript 前加上 javascript: 并确保其语法正确。

第三，您的 showDetail 方法需要显示元素的字符串 id。在你的 onmouseover 声明中你有 showDetail(resistorDetail1) 而不是 showDetail('resistorDetail1').

最后，当您在 HTML 中引用 javascript 时，您需要确保首先加载 javascript。只需查看开发人员的控制台，您就可以通过错误 "showDetail is not defined. 看到它。我将其切换为 No wrap - in <body> 并且工作正常。

但是我强烈建议不要直接引用 HTML 中的 javascript。相反，首先加载 HTML，然后使用 javascript 的 DOM 就绪事件来绑定您的事件。这将增加您的加载时间，并在需要时更容易切换到 jQuery/Zepto 之类的内容。

完整代码

HTML

<section id="contentWrapper">
    <div id="resistorContent" class="content">
        <section id="resistorDetail1">
            <img src="http://d3d71ba2asa5oz.cloudfront.net/40000483/images/pic1.jpg" />
        </section>
        <section id="resistorDetail2">
            <img src="http://d3d71ba2asa5oz.cloudfront.net/40000483/images/pic2.jpg" />
        </section>
        <section id="resistorDetail3">
            <img src="http://d3d71ba2asa5oz.cloudfront.net/40000483/images/pic3.jpg" />
        </section>
        <section id="resistorDetail4">
            <img src="http://d3d71ba2asa5oz.cloudfront.net/40000483/images/pic4.jpg" />
        </section>
        <ul>
            <li onmouseover="javascript: showDetail('resistorDetail1')"></li>
            <li onmouseover="javascript: showDetail('resistorDetail2')"></li>
            <li onmouseover="javascript: showDetail('resistorDetail3')"></li>
            <li onmouseover="javascript: showDetail('resistorDetail4')"></li>
        </ul>
    </div>
</section>

JS

var children = document.querySelectorAll('.content > section[id]');

function showDetail(target) {
    for (var i = 0, child; child = children[i]; i++) {
        child.style.display = 'none';
    }
    document.getElementById(target).style.display = 'block';
}

CSS

(unchanged)

Answer 2

这是另一个工作 fiddle。

https://jsfiddle.net/2qz2srqs/4/

问题有两点。

您将未定义的变量传递到您的 onmouseover 属性中。你想要字符串（我引用了它们）
在 JSFiddle 中，您不会自动获得 window 作用域，因此您必须将函数分配为 window 的属性如果您希望能够用事件属性命中它。

通过悬停 ul li 来切换图片

toggle pictures by hovering ul li

javascript

css

image

hover

TL;DR

原因

完整代码

HTML

JS

CSS