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

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

祝你好运！

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

How can I create a star based feedback system for a website?

html

javascript

jquery

image