星级评分系统在点击时节省价值

Question

我试图建立一个星级评分系统，我有这个代码，我想对它进行一些更改，在用户点击星星后它会显示一个有多少星星的警报并重置颜色，我想要的是用户点击它后留下的颜色，并用星空下的div替换警报，这是我的代码：

＆＃13;

＆＃13;

$(function() {
    $("div.star-rating > s, div.star-rating-rtl > s").on("click", function(e) {
        var numStars = $(e.target).parentsUntil("div").length+1;
        alert(numStars + (numStars == 1 ? " star" : " stars!"));
    });
});

＆＃13;

.star-rating s:hover {
    color: red;
}
.star-rating-rtl s:hover {
    color: red;
}

.star-rating s,
.star-rating-rtl s {
    color: black;
    font-size: 50px;
    cursor: default;
    text-decoration: none;
    line-height: 50px;
}
.star-rating {
    padding: 2px;
}
.star-rating-rtl {
    background: #555;
    display: inline-block;
    border: 2px solid #444;
}
.star-rating-rtl s {
    color: yellow;
}
.star-rating s:hover:before, .star-rating s.rated:before {
    content: "\2605";
}
.star-rating s:before {
    content: "\2606";
}
.star-rating-rtl s:hover:after, .star-rating-rtl s.rated:after{
    content: "\2605";
}
.star-rating-rtl s:after {
    content: "\2606";
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="star-rating"><s><s><s><s><s></s></s></s></s></s></div>
<div class="star-rating-rtl"><s><s><s><s><s></s></s></s></s></s></div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

请参阅CSS中添加的.active类以查找其中的更改。

参见JS中的代码和注释

＆＃13;

＆＃13;

$(function() {
    $("div.star-rating > s, div.star-rating-rtl > s").on("click", function(e) {
    
    // remove all active classes first, needed if user clicks multiple times
    $(this).closest('div').find('.active').removeClass('active');

    $(e.target).parentsUntil("div").addClass('active'); // all elements up from the clicked one excluding self
    $(e.target).addClass('active');  // the element user has clicked on


        var numStars = $(e.target).parentsUntil("div").length+1;
        $('.show-result').text(numStars + (numStars == 1 ? " star" : " stars!"));
    });
});

＆＃13;

.show-result {
  margin: 10px;
  padding: 10px;
  color: green;
  font-size: 20px;
}

.star-rating s:hover,
.star-rating s.active {
    color: red;
}
.star-rating-rtl s:hover,
.star-rating-rtl s.active {
    color: red;
}

.star-rating s,
.star-rating-rtl s {
    color: black;
    font-size: 50px;
    cursor: default;
    text-decoration: none;
    line-height: 50px;
}
.star-rating {
    padding: 2px;
}
.star-rating-rtl {
    background: #555;
    display: inline-block;
    border: 2px solid #444;
}
.star-rating-rtl s {
    color: yellow;
}
.star-rating s:hover:before,
.star-rating s.rated:before,
.star-rating s.active:before {
    content: "\2605";
}
.star-rating s:before {
    content: "\2606";
}
.star-rating-rtl s:hover:after,
.star-rating-rtl s.rated:after,
.star-rating-rtl s.active:after {
    content: "\2605";
}

.star-rating-rtl s:after {
    content: "\2606";
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="star-rating"><s><s><s><s><s></s></s></s></s></s></div>
<div class="star-rating-rtl"><s><s><s><s><s></s></s></s></s></s></div>

<div class="show-result">No stars selected yet.</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

以下是两个选项：

当用户点击时，将父容器上的类==设置为星级，如rated-3。然后，使用CSS'first-child和兄弟选择器激活第一个星和另外N个商店。

当用户点击时，使用JS在所有星星上设置class="active"，包括点击的星星。

对于任一情况，请复制悬停CSS以应用于.active或:first-child, :first-child+s,...。元件。

Answer 3

以下是如何做到这一点。 在你的星际div下添加另一个div并给它一个id，让我们说id = selectedStars

在你的js代码中用这个替换警戒线

的document.getElementById（ 'selectedStars'）的innerHTML = numStars;

这里你去，这将给你最后一个div中的选定星数

Answer 4

通过使用CSS中的rated类，可以选择此选项。

//remove ratings
$("s").removeClass("rated");
//adds the rated class
$(e.target).parents("s").addClass('rated');
$(e.target).closest("s").addClass('rated');

Answer 5

$(function() {
    $("div.star-rating > s, div.star-rating-rtl > s").on("click", function(e) {
    
    // remove all active classes first, needed if user clicks multiple times
    $(this).closest('div').find('.active').removeClass('active');

    $(e.target).parentsUntil("div").addClass('active'); // all elements up from the clicked one excluding self
    $(e.target).addClass('active');  // the element user has clicked on


        var numStars = $(e.target).parentsUntil("div").length+1;
        $('.show-result').text(numStars + (numStars == 1 ? " star" : " stars!"));
    });
});

.show-result {
  margin: 10px;
  padding: 10px;
  color: green;
  font-size: 20px;
}

.star-rating s:hover,
.star-rating s.active {
    color: red;
}
.star-rating-rtl s:hover,
.star-rating-rtl s.active {
    color: red;
}

.star-rating s,
.star-rating-rtl s {
    color: black;
    font-size: 50px;
    cursor: default;
    text-decoration: none;
    line-height: 50px;
}
.star-rating {
    padding: 2px;
}
.star-rating-rtl {
    background: #555;
    display: inline-block;
    border: 2px solid #444;
}
.star-rating-rtl s {
    color: yellow;
}
.star-rating s:hover:before,
.star-rating s.rated:before,
.star-rating s.active:before {
    content: "\2605";
}
.star-rating s:before {
    content: "\2606";
}
.star-rating-rtl s:hover:after,
.star-rating-rtl s.rated:after,
.star-rating-rtl s.active:after {
    content: "\2605";
}

.star-rating-rtl s:after {
    content: "\2606";
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="star-rating"><s><s><s><s><s></s></s></s></s></s></div>
<div class="star-rating-rtl"><s><s><s><s><s></s></s></s></s></s></div>

<div class="show-result">No stars selected yet.</div>