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

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 属性设置为新图像，就像您已经完成的那样。

祝你好运！