Best way to add add new class when the i tag clicked inside DIV-CodePudding

I have a div that contains a rating icon which can be seen by the star icon. If the user clicks on the icon, the icon will change color. The code is working fine but I am not satisfied with mine. Because it's too long. I'm sure there's a better way than what I did. Please help.

index.hmtl

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Test</title>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA 058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <style type="text/css">
        .stars-y {
            color: yellow;
            -webkit-text-stroke-width: 1px;
            -webkit-text-stroke-color: orange;
        }
    </style>
</head>
<body>

    <div >
        <span>Pilih Rating</span><br>
        <i  id="rating-1"></i>
        <i  id="rating-2"></i>
        <i  id="rating-3"></i>
        <i  id="rating-4"></i>
        <i  id="rating-5"></i>
    </div>

</body>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj 3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script type="text/javascript">
    

    $(document).on('click', "*" ,function(evt) {
        if (this == evt.target) {
            if(evt.target.id == 'rating-1'){
                $("#rating-1").addClass("stars-y");
                $("#rating-2").removeClass("stars-y");
                $("#rating-3").removeClass("stars-y");
                $("#rating-4").removeClass("stars-y");
                $("#rating-5").removeClass("stars-y");
            }else if(evt.target.id == 'rating-2'){
                $("#rating-1").addClass("stars-y");
                $("#rating-2").addClass("stars-y");
                $("#rating-3").removeClass("stars-y");
                $("#rating-4").removeClass("stars-y");
                $("#rating-5").removeClass("stars-y");
            }else if(evt.target.id == 'rating-3'){
                $("#rating-1").addClass("stars-y");
                $("#rating-2").addClass("stars-y");
                $("#rating-3").addClass("stars-y");
                $("#rating-4").removeClass("stars-y");
                $("#rating-5").removeClass("stars-y");
            }else if(evt.target.id == 'rating-4'){
                $("#rating-1").addClass("stars-y");
                $("#rating-2").addClass("stars-y");
                $("#rating-3").addClass("stars-y");
                $("#rating-4").addClass("stars-y");
                $("#rating-5").removeClass("stars-y");
            }else if(evt.target.id == 'rating-5'){
                $("#rating-1").addClass("stars-y");
                $("#rating-2").addClass("stars-y");
                $("#rating-3").addClass("stars-y");
                $("#rating-4").addClass("stars-y");
                $("#rating-5").addClass("stars-y");
            }
        }     
    });

</script>
</html>

CodePudding user response：

You can do it like this:

$("[id^=rating]").click(function(evt) {
  $("[id^=rating]").removeClass("stars-y");
  $(this).prevAll(".fa-star").add(this).addClass("stars-y")
});

demo

$("[id^=rating]").click(function(evt) {
  $("[id^=rating]").removeClass("stars-y");
  $(this).prevAll(".fa-star").add(this).addClass("stars-y")
});

.stars-y {
  color: yellow
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<div >
  <span>Pilih Rating</span><br>
  <i  id="rating-1"></i>
  <i  id="rating-2"></i>
  <i  id="rating-3"></i>
  <i  id="rating-4"></i>
  <i  id="rating-5"></i>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj 3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>