星级评定系统 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 的新手，非常感谢我能理解的答案。 "alert" 只是一个测试，我实际上希望它在下面显示评分。

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

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>

星级评定系统 jquery

Star rating system jquery

javascript

jquery

html

css

rating