Question

It is a link to w3schools Website for a JS tutorial

在上面的程序中，我发现（if循环）中有两个src图像，即img src="pic_bulboff.gif"和img src= "pic_bulbon.gif"。为什么需要两个img src's？有什么用？＆＃34;匹配＆＃34;在这个计划中？

Answer 1

检查图像是否是bulbon图像，如果是，则将其更改为灯泡图像，反之亦然。

Answer 2

src属性是图片的网址 - 它显示的是什么。这不是一个循环，它是一个if语句 - 一个分支或条件语句 - 每次调用该函数时，只会有一个分支。这是一个切换 - 当您单击灯光时，它会将src属性切换为当前未选中的属性。

match是function on a string，需要regular expression。如果你刚刚开始编程，这是一个很深的兔子洞，但基本上它是在检查当前src属性值是否包含该文本。

Answer 3

要回答您的问题，请查看整个代码：

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Can Change Images</h1>

<img id="myImage" onclick="changeImage()" src="pic_bulboff.gif" width="100" height="180">

<p>Click the light bulb to turn on/off the light.</p>

<script>
function changeImage() {
    var image = document.getElementById('myImage');
    if (image.src.match("bulbon")) {
        image.src = "pic_bulboff.gif";
    } else {
        image.src = "pic_bulbon.gif";
    }
}
</script>

</body>
</html>

问题所述，重点是点击<img>代码后更改<img> src属性。

这意味着如果指示灯亮起，则表示src标记的<img>属性包含单词 off ，我们要更改{{1}成为src。这应该像普通灯泡一样开启和关闭。每个图像代表一个关闭的灯泡或一个打开的灯泡。

Match 是解决方案的关键。匹配的是它会查看一个字符串并在该字符串中找到一个单词，如果这个单词存在，那么它将返回true。

对src="pic_bulbon.gif"属性中的字符串使用匹配将有助于我们在或 off *上找到一词。因此，考虑** {gif或pic_bulb off .gif上src属性包含的内容，pic_bulb ，我们将在JavaScript中进行匹配：

src，相反地转换为stringName.match(someOtherString)或image.src.match("bulbon")。

在此之后，我们可以通过if / else语句将image.src.match("bulboff")属性设置为 on 或 off ：

src

如果您还有任何疑问，请在下面的评论中提问。

Answer 4

这就是代码正在做的事情：Working Example with logging

function changeImage() {
  // grab the element (in this case an img tag) using the id 'myImage'
    var image = document.getElementById('myImage');
  // check to see if the source of the image contains the word 'bulbon'
  // match return an array of matches
    if (image.src.match("bulbon")) {
      // if there is a match for bulbon change the image src to pic_bulboff.gif
        image.src = "pic_bulboff.gif";
    } else {
      // if not change it to pic_bulbon.gif
        image.src = "pic_bulbon.gif";
    }
}


// on match:


var s = 'aaaabulbonaaa';

var matchResult = s.match('bulbon');
  // match return an array of matches
console.log(matchResult); // ["bulbon"]

两个不同的img在给定代码中的意义？

4 个答案: