【问题标题】:Javascript function not working for all elementsJavascript函数不适用于所有元素
【发布时间】:2014-09-22 20:00:01
【问题描述】:

我正在尝试编写一个在鼠标悬停时更改图像的脚本。我有 6 张图片,但该功能仅适用于其中一张(第一张)

<div id="picture-container">
    <img class="picture" id="360" src="360.jpg" onclick="enlarge(360);"  onmouseover="pic_info(360);"
    onmouseout="pic_ret(360);"/>
    <img class="picture" id="bmx" src="bmx.jpg" onclick="enlarge(bmx);"/>
    <img class="picture" id="buzludzha" src="buzludzha.jpg" onclick="enlarge(buzludzha);"
    onmouseover="pic_info(buzludzha);"/>
    <img class="picture" id="pirata" src="pirata.jpg" onclick="enlarge(pirata);"
    onmouseover="pic_info(pirata);"/>
    <img class="picture" id="snowboard" src="snowboard.jpg" onclick="enlarge(snowboard);"
    onmouseover="pic_info(snowboard);"/>
    <img class="picture" id="vitiskali" src="vitiskali.jpg" onclick="enlarge(vitiskali);"
    onmouseover="pic_info(vitiskali);"/>
    <img class="picture" id="ispolin" src="ispolin.jpg" onclick="enlarge(ispolin);"
    onmouseover="pic_info(ispolin);"/>

</div>

还有脚本:

function pic_info(id) {

if (id == "360") {
    var p = document.getElementById(id);
    p.src = "360info.jpg";
}
if (id == "buzludzha") {
    var p = document.getElementById(id);
    p.src = "buzludzhainfo.jpg";
}
if (id == "pirata") {
    var p = document.getElementById(id);
    p.src = "piratainfo.jpg";
}
if (id == "snowboard") {
    var p = document.getElementById(id);
    p.src = "snowboardinfo.jpg";
}
if (id == "vitiskali") {
    var p = document.getElementById(id);
    p.src = "vitiskaliinfo.jpg";
}
if (id == "ispolin") {
    var p = document.getElementById(id);
    p.src = "ispolininfo.jpg";
}

正如我所说,该脚本仅适用于 id="360" 的图片,并且它被导入到 html 文档的 head 标记中。函数“enlarge();”也会发生同样的事情。为什么会这样,我该如何解决? 提前谢谢你!

【问题讨论】:

  • 我可以建议重写你的代码吗?类似于:function pic_info(id){var p = document.getElementById(id); var src = id + "info.jpg"; p.src = src; },更易于阅读和扩展到新功能。
  • 不完全相关,但一个 var p = document.getElementById(id); 就足够了,你不需要六个...
  • 删除那些 if 语句...改用 switch 语句:developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

标签: javascript html image src


【解决方案1】:

只是表面上,传递一个变量而不是一个字符串:enlarge(bmx); 应该是:enlarge('bmx');,其他的以此类推

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2010-11-30
    • 1970-01-01
    • 1970-01-01
    • 2019-06-28
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多