星级评分系统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是我制作的，因此当您将鼠标悬停在恒星上方时，前面的恒星会亮起，因为您只能使后续的恒星亮起，因此我不得不使用方向将其反转：rtl;

这是问题所在，而不是$（“＃rating1 span：nth-​​child（1）”）中的1，我想要变量X，并且如果我单击第一个星号，我希望X取决于单击的是哪个x = 5等。我是jQuery的新手，非常感谢我能理解的答案。 “警报”只是一个测试，我实际上希望它显示下面的等级。

如果尚不清楚，请询问，我将更新我的问题，如果它令人困惑，请原谅我，我是编程和stackoverflow的初学者。

Answer 1

更改

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

至

$("#rating1 span")

并使用.index获取clicked元素的索引：

 $("#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>