Question

我是JavaScript的新手（只有几天阅读一本书），我仍然坚持使用此代码段。我一遍又一遍地看着它，但似乎无法弄清楚它为什么不起作用。我确信这是一件非常简单的事情，我只是忽略了，我只需要一双新眼睛来看待它。

代码应该更新页面上的占位符图像，而不必重新加载页面。但是，当我点击图像的链接时，它会将我带到图像所在的链接，而不是替换占位符图像。这是我的HTML代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Image Gallery</title>
<script type="text/javascript" src="scripts/showPic.js"></script>
</head>
<body>

    <h1>Snapshots</h1>
    <ul>
        <li>
        <a href="images/cat.jpg" onclick="showPic(this); return false;" title="A Cat">Cat</a>
        </li>
        <li>
        <a href="images/night.jpg" onclick="showPic(this); return false;" title="Night">Night</a>
        </li>
        <li>
        <a href="images/coke.jpg" onclick="showPic(this); return false;" title="Coke">Coke</a>
        </li>
        <li>
        <a href="images/sport.jpg" onclick="showPic(this); return false;" title="Sports">Sport</a>
        </li>
        <li>
        <a href="images/mnms.png" onclick="showPic(this); return false;" title="MnM's">MnM's</a>
        </li>
        <li>
        <a href="images/kid.jpg" onclick="showPic(this); return false;" title="A Kid">Kid</a>
        </li>
    </ul>

    <br />

    <img id="placeholder" src="images/placeholder.jpg" alt="Place Holder Image" />

</body>
</html>

这是我用来完成这项工作的JavaScript函数：

<script type="text/javascript">

function showPic(whichpic) { 
    var source = whichpic.getAttribute("href"); 
    var placeholder = document.getElementById("placeholder"); 
    placeholder.setAttribute("src",source);
}

</script>

Answer 1

单击超链接时，您有两件事情要发生：

HREF导航
onclick事件处理程序正在运行

你的return false;有效地“阻止”事件处理程序做任何事情，所以你在那里做得很好。但是，将图像的地址存储在HREF中可能是一个坏主意。尝试这样的事情：

<ul>
    <li>
    <a href="#" img="images/cat.jpg" onclick="showPic(this); return false;" title="A Cat">Cat</a>
    </li>
    <li>
    <a href="#" img="images/night.jpg" onclick="showPic(this); return false;" title="Night">Night</a>
    </li>
    <li>
    <a href="#" img="images/coke.jpg" onclick="showPic(this); return false;" title="Coke">Coke</a>
    </li>
    <li>
    <a href="#" img="images/sport.jpg" onclick="showPic(this); return false;" title="Sports">Sport</a>
    </li>
    <li>
    <a href="#" img="images/mnms.png" onclick="showPic(this); return false;" title="MnM's">MnM's</a>
    </li>
    <li>
    <a href="#" img="images/kid.jpg" onclick="showPic(this); return false;" title="A Kid">Kid</a>
    </li>
</ul>

你的javascript functiong是这样的：

function showPic(whichpic) { 
    var source = whichpic.getAttribute("img"); 
    var placeholder = document.getElementById("placeholder"); 
    placeholder.setAttribute("src",source);
}

Answer 2

示例看起来应该有效。

但是，当一个人以这种方式意外形成提交或意外的后续链接时（意外是因为form的{{1}}或您的onsubmit的{{1}}有一个其中a），通常是由于您的javascript代码引发了异常，并且跳过了onclick。

请参阅：

return false;

我认为您发布的示例看起来很好，但是如果您的实时版本有一些小的差异？我怀疑找不到占位符元素，并在其上设置src属性会引发破坏它的异常。

为什么尝试替换图像源而不是浏览图像？

2 个答案: