Question

我正在尝试创建一个星级系统，当您将其悬停在鼠标上方时，直到鼠标上方的星星变成橙色，然后再将鼠标移开，星星就会再次变为黑色。 It looks like this。如果单击星星，那么即使您将鼠标移开，鼠标上的星星也应保持橙色，而现在非橙色的星星仍然会受到是否悬停它们的影响。这是我编写的代码；

<div id="stars">
<span id="1" class="fa fa-star" onmouseover="checked('1')" onclick="selected('1')" onmouseout="unchecked('1')"  style="width: 20px;"></span>
<span id="2" class="fa fa-star" onmouseover="checked('2')" onclick="selected('2')" onmouseout="unchecked('2')"  style="width: 20px;"></span>
<span id="3" class="fa fa-star" onmouseover="checked('3')" onclick="selected('3')" onmouseout="unchecked('3')"  style="width: 20px;"></span>
<span id="4" class="fa fa-star" onmouseover="checked('4')" onclick="selected('4')" onmouseout="unchecked('4')"  style="width: 20px;"></span>
<span id="5" class="fa fa-star" onmouseover="checked('5')" onclick="selected('5')" onmouseout="unchecked('5')"  style="width: 20px;"></span>
</div>

<script language="JavaScript" type="application/javascript">

var selectedVariable = false;
var stars = 0;

function checked(x) {
    console.log("Hallo ich bin :"+x);
    var i;
    for (i=1; i<=x; i++) {
        document.getElementById(i).style.color = "orange";
    }
}

function unchecked(x) {
    var i;
    if (selectedVariable==false) {
        for (i = 1; i <= x; i++) {
            document.getElementById(i).style.color = "#305d6d";
        }
    } else if (x>stars) {
        for (i=stars; i<=5; i++) { //why can i not change this to i>stars?
            document.getElementById(i).style.color = "#305d6d";
        }
    }
}

function selected(x) {
    console.log("Clicked :"+x);
    var i;
    for (i=1; i<=x; i++) {
        document.getElementById(i).style.color = "orange";
        stars = x;
    }
    for (i>x; i<=5; i++) {
        document.getElementById(i).style.color = "#305d6d";
    }
    selectedVariable = true;
}

</script>

发生的事情是，例如，我单击第三颗星，然后将其从第三颗星移开，这使其工作正常，这意味着第一颗，第二颗和第三颗仍为橙色。但是，如果单击第三颗星，然后将鼠标移至第四颗或第五颗，然后然后将鼠标移开，则只有前两颗星保持橙色。我可以看到为什么发生这种情况，因为在未选中的函数中，如果x>处于星号，则转到第二个其他函数。为了解决此问题，我想在for循环中将for循环更改为for（i> stars; ...），但这会导致整个操作无效。

我想知道为什么它不起作用，因为所选函数中的第二个for循环看起来像那样并且可以工作，以及如何修复它。

非常感谢:)）这是我的第一个问题，尽管我不确定您还是不会，但请随时告诉我如何进行改进。

如果这是相关的；我只是将其作为学习练习来进行，因此尽管使用其他语言/系统的建议会很有趣，但它们并不会特别有用。

使用for循环进行星级评定

0 个答案: