javascript - 星级评分系统jquery

Question

我正在尝试制作一个星级评分系统，如果您点击星星，它将显示评分。

(仅供引用，我有多个这样的 div，所以这就是为什么我没有给每个星星(跨度)一个唯一的 ID)

HTML:

    <div id="rating1" class="rating">
        <span>★</span><span>★</span><span>★</span><span>★</span><span>★</span>
    </div>

jQuery:

    $(document).ready(function(){

$("#rating1 span:nth-child(1)").click(function()
{
    if (x == 5)
    {
        alert("You rate 1 star");
    }
    if (x == 4)
    {
        alert("You rate 2 star");
    }
    if (x == 3)
    {
        alert("You rate 3 star");
    }
    if (x == 2)
    {
        alert("You rate 4 star");
    }
    if (x == 1)
    {
        alert("You rate 5 star");
    }
  });
});

如果你想知道为什么数字会翻转，那是因为我制作它的 css，当你将鼠标悬停在一颗星星上时，前面的星星会亮起，因为你只能让后面的星星亮起来，我不得不反转他们使用 direction:rtl;

这就是问题所在，而不是 $("#rating1 span:nth-child(1)") 中的 1 我想要变量 X 并且我希望 X 取决于我点击的那个，如果我点击第一颗星 x=5 等。我是 jQuery 的新手，非常感谢我能理解的答案。 “警报”只是一个测试，我实际上希望它在下方显示评级。

如果有任何不清楚的地方，请提问，我会更新我的问题，如果它令人困惑，请原谅我，我是初学者，无论是编程还是 stackoverflow。

Answer 1

改变

$("#rating1 span:nth-child(1)")

到

$("#rating1 span")

并使用.index获取被点击元素的索引:

$("#rating1 span").click(function() {
  var x = $(this).index() + 1;
  alert(x);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="rating1">
  <span>1</span><span>2</span><span>3</span><span>4</span><span>5</span>
</div>