javascript - 代码未按预期工作

Question

嘿伙计们，我想我需要一双新的眼睛来帮助我查看我的代码，它没有按照我的预期工作。抱歉这个问题相对简单，但我并没有真正用 Javascript 编写代码。无论如何:

基本上我想做的是让图像在鼠标悬停时更改为反转版本。到目前为止，我只测试 id 为“crew1”的图像。代码如下:

<script type="text/javascript">
function imageChange(oldID) {
    var a = "http://www.affiliateskeptic.com/wp-content/uploads/2010/06/face_placeholder_new.jpg";
    var b = "http://www.affiliateskeptic.com/wp-content/uploads/2010/06/face_placeholder_new.jpg";
    var c = "http://www.affiliateskeptic.com/wp-content/uploads/2010/06/face_placeholder_new.jpg";
    var d = "http://www.affiliateskeptic.com/wp-content/uploads/2010/06/face_placeholder_new.jpg";
    switch(oldID) {
        case "crew1":
            document.getElementById(oldID).src=a;
            break;
        case "crew2":
            document.getElementById(oldID).src=b;
            break;
        case "crew3":
            document.getElementById(oldID).src=c;
            break;
        case "crew4":
            document.getElementById(oldID).src=d;
            break;
    }
}</script>

相关的HTML代码是:

<div>
<img onmouseover="imageChange("crew1")" id="crew1" src="http://www.affiliateskeptic.com/wp-content/uploads/2010/06/face_placeholder.jpg" alt="Picture of Crew 1" width="224" height="235">
<p>Crew 1 character description.</p></div>

很抱歉格式错误，但由于某种原因，当我将 script 和 div 放在新行中时，它们的结束标记没有显示。

预先感谢您的帮助。

Answer 1

您的 HTML 中存在嵌套引用问题。您可以通过切换所使用的引号样式来解决此问题，因为 JavaScript 和 HTML 可以互换地接受单引号和双引号。更改此:

<img onmouseover="imageChange("crew1")" ...>

对此:

<img onmouseover="imageChange('crew1')" ...>