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)";
    }
});

jquery onclick单选按钮背景更改

2 个答案: