如何使 onclick 函数更改两个图像的 src

Question

我应该将脚本添加到 HTML 文件，这样当我单击星级系统中的第一颗星时，它会将 src 更改为 'star-on.png' 而不是 'star-off.png'。那个，我能做到。但我不知道如何做到这一点，如果用户点击第二颗星，它会将第一颗星和第二颗星的 src 更改为 'star-on.png'。

这是我老师提供的代码：

<!-- 1. PUT YOUR NAME IN THIS COMMENT -->
<html>
    <head>
        <!-- 2. DO NOT EDIT THE CSS -->
        <style type="text/css">
            body {
                margin: 0;
            }
            div {
                width: 520px;
                display: block;
                margin-left: auto;
                margin-right: auto;
            }

            img {
                width: 100px;
            }
        </style>
        <!-- 2.5 YOU MAY ALTER THE STYLING OF THE BUTTON IF YOU WISH. --> 
        <style type="text/css">
            button {
                width: 200px;
                display: block;
                margin-left: auto;
                margin-right: auto;
            }
        </style>
    </head>
    <!-- 3. DO NOT ALTER THE HTML EXCEPT TO ADD ONCLICK, ONLOAD, AND SIMILAR ATTRIBUTES -->
    <!-- AS NEEDED -->
    <body>
        <div>
            <img src="star-off.png"  id="one" class="2">
            <img src="star-off.png" id="two" class="2">
            <img src="star-off.png" id="three">
            <img src="star-off.png" id="four">
            <img src="star-off.png" id="five">
        </div>
        <button id="reset" onclick="document.getElementById('one').src='star-off.png'">Reset</button>
        <!-- 4. YOU MAY PUT YOUR SCRIPTING HERE -->

        <script>
            document.getElementById('one').onclick = function () {
            document.getElementById('one').src="star-on.png";
            }
            document.getElementById('two').onclick = function () {
            document.getElementById('two').src="star-on.png";
            }
            document.getElementById('three').onclick = function () {
            document.getElementById('three').src="star-on.png";
            }
            document.getElementById('four').onclick = function () {
            document.getElementById('four').src="star-on.png";
            }
            document.getElementById('five').onclick = function () {
            document.getElementById('five').src="star-on.png";
            }
        </script>
    </body>
</html>

除了script标签里面的东西和button里面的onclick，都是我老师的代码

这是它的样子：

Answer 1

好吧，您实际上已经在脚本中完成了大部分想要做的事情。查看每一行：

document.getElementById('one').onclick = function () {
    document.getElementById('one').src="star-on.png";
}
document.getElementById('two').onclick = function () {
    document.getElementById('two').src="star-on.png";
}
document.getElementById('three').onclick = function () {
    document.getElementById('three').src="star-on.png";
}
document.getElementById('four').onclick = function () {
    document.getElementById('four').src="star-on.png";
}
document.getElementById('five').onclick = function () {
    document.getElementById('five').src="star-on.png";
}

本质上，每个人都通过其 Id 属性表示 select 元素，在前一组中由本部分中的 'id=""' 标识：

<img src="star-off.png"  id="one" class="2">
<img src="star-off.png" id="two" class="2">
<img src="star-off.png" id="three">
<img src="star-off.png" id="four">
<img src="star-off.png" id="five">

然后给它附加一个 onclick 事件。当该 onclick 事件触发时，执行您在事件规范后的每个等号右侧定义的功能。

在你的每个函数中，它只是简单地识别 DOM 上与你提供的元素 id 相匹配的元素（就像你在上一节中分配事件处理程序一样） ) 并且您要将其 'src' 属性的值更改为您在等号右侧定义的字符串。

根据您的要求，选择第二个。这是您引用的 HTML（对于第一颗星和第二颗星）：

<img src="star-off.png"  id="one" class="2">
<img src="star-off.png" id="two" class="2">

这是您已经为第二个准备好的事件处理程序：

document.getElementById('two').onclick = function () {
    document.getElementById('two').src="star-on.png";
}

现在，如果您单击第二颗星，您只是将 ID 为 'two' 的元素的 src 属性更改为 'star-on.png' 图像。因此，如果您还想更改它之前的星星元素，它的 ID 为 'one'，因此您需要在事件处理程序中添加此行。

document.getElementById('one').src = "star-on.png";

当然，有更有效的方法可以做到这一点，但毫无疑问，您会随着课程的进行而了解它们。这是您的事件处理程序在此更新后的样子：

document.getElementById('two').onclick = function () {
    document.getElementById('two').src="star-on.png";
    document.getElementById('one').src = "star-on.png";
}

如何使 onclick 函数更改两个图像的 src

How to make an onclick function change the src for two images

javascript

getelementbyid