如何使用 CSS 和 jQuery 创建带有 span 或 ul li 的简单星级？

Question

I found an example of star rating with input of type="radio" .我找到了一个input type="radio"的星级示例。

It's fantastic, but I'd like something simpler.这太棒了，但我想要更简单的东西。 Instead of input of type="radio" , use star rating with <span> example in demonstration (demo) .代替type="radio"的input ，在演示 (demo) 中使用带有<span>示例的星级评分。

Of the following code以下代码中

 .holder { height: 1%; overflow: hidden; position: relative; left: 0; } .left { float: left; } .rating { border: none; float: none; display: block; left: 0; } .rating>input { display: none; } .rating>label:before { margin: 5px; font-size: 1.25em; font-family: FontAwesome; display: inline-block; content: "\\f005"; } .rating>.half:before { content: "\\f089"; position: absolute; } .rating>label { color: #ddd; float: right; } /* Styles hover mouse stars. */ .rating>input:checked~label, /* Show gold star when clicked */ .rating:not(:checked)>label:hover, /* Hover current star */ .rating:not(:checked)>label:hover~label { color: #FFD700; } /* Hover previous stars in list */ .rating>input:checked+label:hover, /* Hover current star when changing rating */ .rating>input:checked~label:hover, .rating>label:hover~input:checked~label, /* Lighten current selection */ .rating>input:checked~label:hover~label { color: #FFED85; }

 <!DOCTYPE html> <html lang="" es> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <!-- FontAwsome Bootstrap --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> <script> $(document).ready(function() { $(document).on('submit', '#frm-rating', function() { //Get form data. var data = $(this).serialize(); //Ajax $.ajax({ type: 'POST', url: 'rating.php', data: data, success: function(data) { $("#result-rating").html(data); } }); return false; }); }); </script> </head> <body> <form id="frm-rating" method="POST"> <div class="holder"> <div class="left"> <fieldset class="rating"> <input type="radio" id="star5" name="rating" value="5" /><label class="full" for="star5" title="Excellent - 5 stars"></label> <input type="radio" id="star4half" name="rating" value="4.5" /><label class="half" for="star4half" title="very good - 4.5 stars"></label> <input type="radio" id="star4" name="rating" value="4" /><label class="full" for="star4" title="All right - 4 stars"></label> <input type="radio" id="star3half" name="rating" value="3.5" /><label class="half" for="star3half" title="All right - 3.5 stars"></label> <input type="radio" id="star3" name="rating" value="3" /><label class="full" for="star3" title="Regular - 3 stars"></label> <input type="radio" id="star2half" name="rating" value="2.5" /><label class="half" for="star2half" title="Regulate the evil - 2.5 stars"></label> <input type="radio" id="star2" name="rating" value="2" /><label class="full" for="star2" title="wrong - 2 stars"></label> <input type="radio" id="star1half" name="rating" value="1.5" /><label class="half" for="star1half" title="Very bad - 1.5 stars"></label> <input type="radio" id="star1" name="rating" value="1" /><label class="full" for="star1" title="Painful - 1 star"></label> <input type="radio" id="starhalf" name="rating" value="0.5" /><label class="half" for="starhalf" title="Waste of time - 0.5 stars"></label> </fieldset> </div> </div> <textarea name="opinion" placeholder="Write a comment..."></textarea> <!-- We use the user's session to get their ID in value --> <input type="hidden" name="user" value="1" /> <button type="submit">Submit Review</button> </form> <div id="result-rating"> <!-- Respuesta Ajax. --> </div> </body> </html>

How can I create stars of the same characteristics in this code using only CSS and jQuery without using frameworks as Bootstrap or others?如何仅使用 CSS 和 jQuery 在此代码中创建具有相同特征的星星，而不使用作为 Bootstrap 或其他框架的框架？

<div id="rating" class="rating">
  <span class="stars"></span>
  <span class="stars"></span>
  <span class="stars"></span>
  <span class="stars"></span>
  <span class="stars"></span>
</div>

Or this code:或者这个代码：

<ul class="star-rating">
  <li class="star-icon">&#9734;</li>
  <li class="star-icon">&#9734;</li>
  <li class="star-icon">&#9734;</li>
  <li class="star-icon half">&#9734;</li>
  <li class="star-icon full">&#9734;</li>
</ul>

And by means of jQuery, get the selected values and send them to the database.并通过 jQuery 获取选定的值并将它们发送到数据库。

$(document).ready(function() {
  $(document).on('submit', '#frm-rating', function() {
    //Obtenemos datos form.
    var data = $(this).serialize();
    //Ajax
    $.ajax({
      type: 'POST',
      url: 'rating.php',
      data: data,
      success: function(data) {
        $("#result-rating").html(data);
      }
    });
    return false;
  });
});

The goal is to have simpler code optimized.目标是优化更简单的代码。

Example:例子：

 .star-icon { color: #ddd; font-size: 2em; position: relative; display: inline; direction: rtl; unicode-bidi: bidi-override; } .star-icon:before{ content: '\\2605'; position: absolute; left: 0; } .star-icon.full:before { color: #fde16d; content: '\\2605'; position: absolute; left: 0; } .star-icon.half:before { color: #fde16d; content: '\\2605'; position: absolute; left: 0; width: 50%; overflow: hidden; direction: ltr; } .star-icon.half:after { content: '\\2605'; position: absolute; right: 0; width: 50%; overflow: hidden; } .star-rating > li:hover, .star-rating > li:hover ~li:before, .star-rating > li:hover ~li:after { width: 100%; color: #fde16d; cursor: pointer; }

 <ul class="star-rating"> <li class="star-icon">&#9734;</li> <li class="star-icon">&#9734;</li> <li class="star-icon">&#9734;</li> <li class="star-icon half">&#9734;</li> <li class="star-icon full">&#9734;</li> </ul>

Now to know what rating the user has chosen through PHP and jQuery.现在来了解用户通过 PHP 和 jQuery 选择的评级。

Something more dynamic.更有活力的东西。

<?php
    function calculate_stars($max, $rating){
        $full_stars=floor($rating);
        $half_stars = ceil($rating-$full_stars);
        $gray_stars = $max-($full_stars + $half_stars);
        return array ($full_stars, $half_stars, $gray_stars);
    }

    function display_star($rating){
        $output="";
        $number_stars = calculate_stars(5,$rating);
        $full = $number_stars[0];
        $half = $number_stars[1];
        $gray = $number_stars[2];
        $output ='<ul class="star-rating">';
        if($gray)
            for ($i=0;$i<$gray;$i++)
            {
                $output .= '<li class="star-icon">&#9734;</li>';
            }

        if($half){
            $output .= '<li class="star-icon half">&#9734;</li>';
        }

        if($full){
            for($i=0; $i<$full;$i++)
            {
                $output .= '<li class="star-icon full">&#9734;</li>';
            }
        }

        $output .='</ul>';
        return $output;
    }

    echo display_star(4.3);

    exit;
?>

Source observe the first 3 videos explaining the theme. 来源观察解释主题的前 3 个视频。

I do not want to use JavaScript;我不想使用 JavaScript； I want it in jQuery.我想要它在 jQuery 中。

Answer 1

HTML markup: HTML 标记：

<ul class="c-rating">
    <li class="c-rating__item rating is-active left" data-index="0"></li>
    <li class="c-rating__item" data-index="1"></li>
    <li class="c-rating__item left" data-index="2"></li>
    <li class="c-rating__item" data-index="3"></li>
    <li class="c-rating__item left" data-index="4"></li>
    <li class="c-rating__item" data-index="5"></li>
    <li class="c-rating__item left" data-index="6"></li>
    <li class="c-rating__item" data-index="7"></li>
    <li class="c-rating__item left" data-index="8"></li>
    <li class="c-rating__item" data-index="9"></li>
</ul>
<input type="hidden" class="rank" />

I have created a custom jQuery plugin for this functionality where you need to pass childClass for child selector and inputClass for input tag selector.我已经创造了这个功能，你需要通过一个自定义的jQuery插件childClass为孩子选择和inputClass输入标签选择。

var activeClassCount = 1;
$.fn.customStarRatings = function(obj) {
    var wrapper = this;
    var stars = obj.childClass;
    var input = obj.inputClass;
    $(wrapper).hover(function() {
        activeClassCount = $(this).find('.rating').index() + 1;
    }, function() {
        var $this = $(this);
        $this.find(stars).slice(1, activeClassCount).addClass('is-active');
        $this.find(stars).slice(activeClassCount, 10).not('.rating').removeClass('is-active');
        // console.log($this.find(stars).slice(activeClassCount, 4).not('.rating'))
    });
    $(stars).hover(function() {
        $(this).prevAll(stars).add($(this)).addClass('is-active');
        $(this).nextAll(stars).removeClass('is-active');
    });
    $(stars).click(function(event) {
        $(".rating").removeClass("rating");
        $(this).addClass('rating');
        activeClassCount = $(this).index() + 1;
        $(this).prevAll(stars).addClass('is-active');
        if (input) {
            $(input).val(($(this).index() + 1)/2);
            console.log($(input).val(), activeClassCount)
        }
    });
}

Then you have to simply call this jQuery function when the DOM gets ready.然后你必须在 DOM 准备好时简单地调用这个 jQuery 函数。

$(".c-rating").customStarRatings({
    childClass: ".c-rating__item",
    inputClass: ".rank"
});

PS The HTML markup is not confined to usage of <ul> and <li> tags only. PS HTML 标记不仅限于使用<ul>和<li>标签。 All you need to do is call this custom function on the wrapper tag of ratings and input element.您需要做的就是在 ratings 和 input 元素的包装标签上调用这个自定义函数。

CSS edits: CSS 编辑：

.c-rating {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}

.c-rating__item {
    -webkit-box-flex: 0;
     -webkit-flex: 0 0 12px;
    -ms-flex: 0 0 12px;
    flex: 0 0 12px;
    height: 24px;
    background-position: -12px 0px;
    background-image: url(stars.svg);
    cursor: pointer;
}
.c-rating__item.left {
    background-position: 0px 0px;
}
.c-rating__item.is-active,
.c-rating__item: hover {
    background-position: -36px 0;
}
.c-rating__item.left.is-active,
.c-rating__item.left: hover {
    background-position: -24px 0;
}

The jQuery call to this function remains the same.对该函数的 jQuery 调用保持不变。 Check the working fiddle here .检查工作小提琴here 。

如何使用 CSS 和 jQuery 创建带有 span 或 ul li 的简单星级？

问题描述

1 个解决方案

解决方案1
1 已采纳 2017-10-09 04:07:34

如何使用 CSS 和 jQuery 创建带有 span 或 ul li 的简单星级？

问题描述

1 个解决方案

解决方案1 1 已采纳 2017-10-09 04:07:34

解决方案1
1 已采纳 2017-10-09 04:07:34