Question

我试图建立一个星级评分系统，如果你点击星号，它会显示评级。

（我有多个这些div，所以我没有给每个星（span）一个唯一的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;

这里出现了问题，而不是$内部的1（＆＃34;＃rating1 span：nth-child（1）＆＃34;）我想要变量X，我希望X到取决于我点击了哪一个，如果我点击第一个星x = 5等我是jQuery的新手，我真的很感激我能理解的答案。＆＃34;警报＆＃34;只是一个测试，我实际上希望它显示下面的评级。

如果有什么不清楚，请问，我会更新我的问题，请原谅我，如果它令人困惑，我是初学者，无论是编程还是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>

星级评分系统jquery

1 个答案: