Question

我试图实现这一点 CSS rating widget 进入我的网络应用程序，从数据库中获取数据并将其显示到表中。表中的一个值是包含评级系统的范围：

<span class="starRating">

我以编程方式为每个数据库项创建范围：

            else if(dbArray[j].match('Rating')){
                var spanID = 'SPAN' + i;
                var ratingDiv = document.createElement(spanID);
                ratingDiv.setAttribute('class', 'starRating');
                var ratingContents = '<input id="rating5" type="radio" name="rating" value="5"><label for="rating5">5</label><input id="rating4" type="radio" name="rating" value="4"><label for="rating4">4</label><input id="rating3" type="radio" name="rating" value="3" checked><label for="rating3">3</label><input id="rating2" type="radio" name="rating" value="2"><label for="rating2">2</label><input id="rating1" type="radio" name="rating" value="1"><label for="rating1">1</label>';
                ratingDiv.innerHTML = ratingContents;
                cellName.appendChild(ratingDiv);
            }

每个跨度都有一个唯一的id，但是它们都使用相同的css。问题是当星级评分被创建时我只能保存一个评级。在没有为每个数据库项创建单独的css的情况下，我是否有办法让评级在每种情况下都是唯一的？以下是问题的粗略示例： JSfiddle showing what the issue is like

Answer 1

你有几个问题，但我认为你比你想象的更近。首先你有非唯一的ID，这是我认为的主要问题。 ID应始终是唯一的。我已经制作了这个jsfiddle，只需用字母前缀重命名id，然后对代码进行非常小的修改就可以了。

http://jsfiddle.net/v2575fg2/

例如：

<div class="rating">
    <span><input type="radio" name="rating" id="astr5" value="5"><label for="str5"></label></span>
    <span><input type="radio" name="rating" id="astr4" value="4"><label for="str4"></label></span>
    <span><input type="radio" name="rating" id="astr3" value="3"><label for="str3"></label></span>
    <span><input type="radio" name="rating" id="astr2" value="2"><label for="str2"></label></span>
    <span><input type="radio" name="rating" id="astr1" value="1"><label for="str1"></label></span>
</div>

然后只需删除你的removeClass：

 //$(".rating span").removeClass('checked');

评级坚持。而且，不是输入点击，我放了跨度，它没有太大变化，使它更精简。

现在你必须弄清楚如何降低评级...

编辑：

降低评分：

添加到点击事件：

$(this).siblings().removeClass('checked');
$(this).parent().addClass('rated');

这在css中：

.rating.rated:hover span:not(:hover) label {
    background:#CCC;
    color:#FFF;
}
.rating.rated:hover span:hover ~ span label,
.rating.rated:hover span:last-child label
{
    background:#F90;
    color:#FFF;
}

更新了jsfiddle：http://jsfiddle.net/v2575fg2/9/

Answer 2

如果我有错误的结局，我道歉。

您是否可以根据评级创建一个类，并将其添加到每个类中。 .rating5 { /* styles for 5 star rating */ }？假设评级在性质上相似并且解决了有限数量的可能结果。

Answer 3

这是我的解决方案：

<强> HTML

<div class="rating">
 <span class="star" data-value="5">☆</span>
 <span class="star" data-value="4">☆</span>
 <span class="star selected" data-value="3">☆</span>
 <span class="star" data-value="2">☆</span>
 <span class="star" data-value="1">☆</span>
</div>

<强> JS

$(document).ready(function () {
    //  Check Radio-box
    $('.rating .star').click(function (evt) {
        var $target = $(evt.currentTarget);
        $target.parent().find('.star').removeClass('selected');
        $target.addClass('selected');
        var userRating = this.data('value');
        alert(userRating);
    });
});

<强> CSS

.rating {
    unicode-bidi: bidi-override;
    direction: rtl;
    text-align: left;
}
.rating > .star {
    cursor: pointer;
    display: inline-block;
    position: relative;
    width: 1.1em;
}
.rating > .star:hover,
.rating > .star:hover ~ .star,
.rating > .star.selected,
.rating > .star.selected ~ .star {
    color: transparent;
    2
}
.rating > .star:hover:before,
.rating > .star:hover ~ .star:before,
.rating > .star.selected:before,
.rating > .star.selected ~ .star:before {
    content:"\2605";
    position: absolute;
    left: 0;
    color: gold;
}

http://jsfiddle.net/bhpyk18w/122/

我正在使用这种模式，我觉得它更清晰（https://css-tricks.com/star-ratings/）。

请注意，您可能希望添加点击内容以选择0星。

如上所述，您不能在DOM上使用相同的ID两次。

具有不同结果的多个div的CSS控件

3 个答案: