当 i 标签在 DIV 内单击时添加新类的最佳方法答案

【问题标题】：Best way to add add new class when the i tag clicked inside DIV当 i 标签在 DIV 内单击时添加新类的最佳方法
【发布时间】：2022-01-22 22:13:24
【问题描述】：

我有一个 div，其中包含一个可以通过星形图标看到的评级图标。如果用户点击图标，图标将改变颜色。代码运行良好，但我对我的不满意。因为太长了。我确信有比我所做的更好的方法。请帮忙。

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 class="rating">
        <span>Pilih Rating</span><br>
        <i class="fa fa-star" id="rating-1"></i>
        <i class="fa fa-star" id="rating-2"></i>
        <i class="fa fa-star" id="rating-3"></i>
        <i class="fa fa-star" id="rating-4"></i>
        <i class="fa fa-star" 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>

【问题讨论】：

有人可以充实完整的答案：$(".fa-star").click(function() { $(".fa-star").removeClass("stars-y"); $(this).prevAll().addBack().addClass("stars-y"); });
lmao只有一行，为什么span标签也变成黄色了？
抱歉，急于提供 something - .prevAll() 会获取所有以前的元素，我没有注意到 .rating 中的跨度，所以你可能只需要.prevAll(".fa-star") 的评级标签。

标签： javascript html jquery bootstrap-4

【解决方案1】：

你可以这样做：

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

演示

$("[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 class="rating">
  <span>Pilih Rating</span><br>
  <i class="fa fa-star" id="rating-1"></i>
  <i class="fa fa-star" id="rating-2"></i>
  <i class="fa fa-star" id="rating-3"></i>
  <i class="fa fa-star" id="rating-4"></i>
  <i class="fa fa-star" 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>

【讨论】：