php - 我在使用 JavaScript 设置图像时遇到问题

Question

我正在尝试制作一个评级系统，但我对 javascript 持反对态度。我做了一个方法，假设将空白星星的图像换成星星。

function setStar(intStarId) {
var stars = new Array("star_one","star_two","star_three","star_four","star_five");
for (var i = 0; i < intStarId; i++)
    document.getElementById(stars[i]).src = "images/star.png";
}

当我调用这个方法时，它不会对星星做任何事情。我怎样才能使它正常工作，以便将空白星图替换为星图？

这是我在 html 中的调用方式。 (它实际上是 php，但它正在呼应 html)

echo "<script language='javascript'>setStar(3)</script>";

这是星星的 html(php 回显 html)

echo "<ul name='a' style='list-style: none; margin: 0px; float: right;'>
                <li name='b' align='center'>
                    <form name = 'test' action='#' method='post'>
                        <a href='#'><img name='star_one' src='images/star_blank.png' onmouseover='hoverInStar(1)' onmouseout='hoverOutStar(1)'/></a>
                        <a href='#'><img name='star_two' src='images/star_blank.png' onmouseover='hoverInStar(2)' onmouseout='hoverOutStar(2)'/></a>
                        <a href='#'><img name='star_three' src='images/star_blank.png' onmouseover='hoverInStar(3)' onmouseout='hoverOutStar(3)'/></a>
                        <a href='#'><img name='star_four' src='images/star_blank.png' onmouseover='hoverInStar(4)' onmouseout='hoverOutStar(4)'/></a>
                        <a href='#'><img name='star_five' src='images/star_blank.png' onmouseover='hoverInStar(5)' onmouseout='hoverOutStar(5)'/></a>
                    </form>
                </li>
            </ul>";

Answer 1

您正在尝试使用 id 在 DOM 中查找元素。但是您的 HTML 输出仅包含名称。尝试将您的代码修改为以下内容

echo "<ul name='a' style='list-style: none; margin: 0px; float: right;'>
                <li name='b' align='center'>
                    <form name = 'test' action='#' method='post'>
                        <a href='#'><img id='star_one' src='images/star_blank.png' onmouseover='hoverInStar(1)' onmouseout='hoverOutStar(1)'/></a>
                        <a href='#'><img id='star_two' src='images/star_blank.png' onmouseover='hoverInStar(2)' onmouseout='hoverOutStar(2)'/></a>
                        <a href='#'><img id='star_three' src='images/star_blank.png' onmouseover='hoverInStar(3)' onmouseout='hoverOutStar(3)'/></a>
                        <a href='#'><img id='star_four' src='images/star_blank.png' onmouseover='hoverInStar(4)' onmouseout='hoverOutStar(4)'/></a>
                        <a href='#'><img id='star_five' src='images/star_blank.png' onmouseover='hoverInStar(5)' onmouseout='hoverOutStar(5)'/></a>
                    </form>
                </li>
            </ul>";

另请注意，id 对于 DOM 中的所有元素都应该是唯一的。