Question

我正在创建一个有趣的网站，其中一个页面是反馈页面。在这里，我有许多容器，彼此在里面并且有不同的东西。我想创建一个基于星的反馈评级，我有两个图像，一个是空星，另一个是填充星。首先看星星是空的，我希望它变成填充的星星，我已经完成了！现在，当试图改变多个图像时，我似乎无法找到一种方法。例如，有人正在留下四星评级，我希望左边的所有星星，包括点击的星星，以更改为另一个图像。

以下是我的图片HTML：

<img src="star.png" width="20px" height="20px" id="1" onclick="change();">
<img src="star.png" width="20px" height="20px" id="2" onclick="change();">
<img src="star.png" width="20px" height="20px" id="3" onclick="change();">
<img src="star.png" width="20px" height="20px" id="4" onclick="change();">
<img src="star.png" width="20px" height="20px" id="5" onclick="change();">

这是我的JavaScript只能更改一个图像：

<script type="text/javascript">
function change()
{
    var image1 = document.getElementById('1');
    image1.src = "filledStar.png";
}

因此，如果我点击第五张图片，我想要更改所有图像，如果我点击第四张最右边的图像，我想要该图像，左边的所有图像都要改变等等。

Answer 1

您可以尝试这样的事情：

在HTML页面中，根据应更改的星号，将包含字符串的数组传递给Javascript change（）函数。例如：

<img src="star.png" width="20px" height="20px" id="1" onclick="change(['1']);">
<img src="star.png" width="20px" height="20px" id="2" onclick="change(['1', '2']);">
<img src="star.png" width="20px" height="20px" id="3" onclick="change(['1', '2', '3']);">
<img src="star.png" width="20px" height="20px" id="4" onclick="change(['1', '2', '3', '4']);">
<img src="star.png" width="20px" height="20px" id="5" onclick="change(['1', '2', '3', '4', '5']);">

然后，在Javscript中，接受数组作为'change（）'中的参数，并迭代它。对于每个项目（必须更改星形的每个“id”），使用数组中的“id”从页面中获取元素，并将其src属性设置为新图像，就像您已经完成的那样。

祝你好运！

如何为网站创建基于星形的反馈系统？

1 个答案: