Star rating of jQuery cases

Keywords: Attribute JQuery less Programming

Let's take a look at the effect:

Code part:
html:

<body>
<ul class="comment">
    <li>☆</li>
    <li>☆</li>
    <li>☆</li>
    <li>☆</li>
    <li>☆</li>
</ul>
</body>

css

<style>
        * {
            padding: 0;
            margin: 0;
        }

        .comment {
            font-size: 40px;
            color: yellow;
        }

        .comment li {
            float: left;
        }

        ul {
            list-style: none;
        }
    </style>

jQuery

<script src="js/jquery-1.12.2.min.js"></script>

    <script>
    $(function(){
        $(".comment>li").mouseover(function(){
            $(this).text("★").prevAll("li").text("★").end().nextAll("li").text("☆");
        }).mouseout(function(){
            $(".comment>li").text("☆");
             $(".comment>li[index=1]").text("★").prevAll("li").text("★")
            }).click(function () {
                $(this).attr("index","1").siblings("li").removeAttr("index");
                //Do not remove the index of sibling elements. When you select multiple stars, you will have problems when you want to select a evaluation that is less than the current number of stars
                // $(this).attr("index","1");
            });

    })
    </script>

All code - > easy to copy and paste

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Pentagram scoring case</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .comment {
            font-size: 40px;
            color: yellow;
        }

        .comment li {
            float: left;
        }

        ul {
            list-style: none;
        }
    </style>
    <script src="js/jquery-1.12.2.min.js"></script>

    <script>
    $(function(){
        $(".comment>li").mouseover(function(){
            $(this).text("★").prevAll("li").text("★").end().nextAll("li").text("☆");
        }).mouseout(function(){
            $(".comment>li").text("☆");
             $(".comment>li[index=1]").text("★").prevAll("li").text("★")
            }).click(function () {
                $(this).attr("index","1").siblings("li").removeAttr("index");
                //Do not remove the index of sibling elements. When you select multiple stars, you will have problems when you want to select a evaluation that is less than the current number of stars
                // $(this).attr("index","1");
            });

    })
    </script>
</head>

<body>
<ul class="comment">
    <li>☆</li>
    <li>☆</li>
    <li>☆</li>
    <li>☆</li>
    <li>☆</li>
</ul>
</body>

</html>

summary
1. Chain programming to solve the problem of broken chain: end() method, add end() in the broken chain part.

$(this).text("★").prevAll("li").text("★").end().nextAll("li").text("☆");

2. Add attribute attr("attribute name", "attribute value") to the element;

 $(this).attr("index","1").siblings("li").removeAttr("index");

The attr("property name") method has only one parameter to get the value of the property.
Note that this line of code must clear the attribute of the sibling element, otherwise it cannot be realized if the second evaluation is lower than the first one.
3. I have just started. If there is any mistake in the above code and expression, I hope that the big guy I see will point out and correct it in time and ask for advice.

Posted by articlesocial on Tue, 03 Dec 2019 17:20:25 -0800

Programmer Group

Star rating of jQuery cases

Hot Keywords