Question

我正在搞乱Head First Javascript一书。所以我的问题是为什么函数if中的turnSad()子句不会触发？更新我在Chrome和FF4中尝试过此操作。另外，如果我要注释if语句，该函数将起作用。

<script type="text/javascript">

    function turnSad() {
        if (document.getElementById("rockImg").src == "rock_happy.png")
            document.getElementById("rockImg").src = "rock.png";
    }

    function touchRock() {
        var userName = prompt("What is your name?", "Enter your name here");

        if (userName) {
            alert("It is nice to meet you " + userName + ".");
            document.getElementById("rockImg").src = "rock_happy.png";
        }
        setTimeout("turnSad();", 1000);
    }

</script>
<img id="rockImg" src="rock.png" alt="iRock"  style="cursor:pointer" 
    onclick="touchRock();" />

Answer 1

当访问src属性（不是属性）时，浏览器可以自动解析相对路径并返回绝对路径，包括协议，域，端口等。

要获取或更改属性值，请使用getAttribute和setAttribute。

image.getAttribute("src");

image.setAttribute("src", "someImage.png");

请参阅此example。

Answer 2

@Anurag的答案很棒，这是你能做的最好的，每个浏览器都支持getAttribute()（在IE 5.5-7中有错误，但是为了让src工作正常）。

我只想添加一些内容：

不要使用setTimeout()的字符串语法，总是传递一个函数（你可以传递一个闭包来运行多个函数），这被认为是最佳实践。字符串变体就像eval()，广为人知的邪恶混蛋。所以你的代码应该是这样的（同样适用于setInterval）：
```
setTimeout(turnSad, 1000);
```
使用getAttribute()，这是最好的方法，你也可以写一个正则表达式的方法。我只是添加了这个以获得乐趣并扩大视图，请使用@Anurag的解决方案。
```
if (document.getElementById("rockImg").src.match(/(^|\/)rock_happy\.png$/i)) {
    document.getElementById("rockImg").src = "rock.png";
}
```
这将尝试以不区分大小写的方式进行匹配，在字符串的末尾查找rock_happy.png，其中包含字符串的开头或前面的/。

jsFiddle Demo

Answer 3

您使用的是哪种浏览器？ IE可能会将文件名转换为大写（“ROCK_HAPPY.PNG”）。使用开发人员工具（按工具工具栏中的“刷新”按钮）确定真正的“src”属性是什么，或者只是alert(document.getElementById().src)

基本的Javascript问题

3 个答案: