jquery onclick单选按钮背景更改

Question

我有星级评定系统。请看这个JsFiddleLink

表格中有五颗星。这是其中之一：

<input type="radio" name="rGroup" value="1" id="r1"/>
<label class="radio" for="r1"></label>

点击星星只是改变背景图像并将星星变成蓝色。

  $(".radio").click(function() {
              $(this).css("background", "url(http://mykadamtala.com/projects/ip/star-blue.png)");
        });

但我想改变它的显示方式。如果用户点击第二颗星，第一颗和第二颗星的背景图像应该会发生变化，并且它们两个变成蓝色星星。如果用户点击第三颗星，左起三颗星都会变成蓝色的一颗。但不是第四个和第五个。

如果用户点击第五颗星，所有星都会变成蓝色。这是因为让他们知道他们给出了二、三或五星级的评价。

Jquery 也应该处理这个问题：用户点击第三颗星，左起三颗星都变成蓝色，但用户再次点击第二颗星（因为用户可以改变主意），现在它应该显示两个蓝色星而不是三。

Answer 1

试试这个代码：

$(".radio").click(function() {
    var r = $(this).attr('for');
    var input = $("#"+r);
    var input_value = input.val();

    var i;
    for(i=1;i<=5;i++) {
        $("#r"+i).next().css("background", "url(http://mykadamtala.com/projects/ip/star.png)");
    }

    var ii;
    for(ii=1;ii<=input_value;ii++) {
        var ch = "#r"+ii;
        $(ch).next().css("background", "url(http://mykadamtala.com/projects/ip/star-blue.png)");
        $(ch).css("background", "url(http://mykadamtala.com/projects/ip/star-blue.png)");
    }
});

当您获得值 = [1,2,3..] 时，for 循环将从 1 运行到任何最大值并更改背景。

当点击次数比之前少时（例如点击 5 然后点击 3 之后）也有效。

Answer 2

由于您想多次考虑选择，您只需将选择内容清空，然后再次显示。

$(".radio").click(function() {
    var $this = $(this); //Current label
    var $labels = $this.parent().children('label'); //Get all labels
    var num = $this.prev().val(); //Get index of selection

    //Remove all stars
    $labels.css("background", "url(http://mykadamtala.com/projects/ip/star.png)");

    //Set stars
    for(var i = 0; i < num; i++) { 
        $labels[i].style.background = "url(http://mykadamtala.com/projects/ip/star-blue.png)";
    }
});