文章/答案/技术大牛

发布

社区首页 >问答首页 >当i标记在DIV内单击时添加新类的最佳方法

问当i标记在DIV内单击时添加新类的最佳方法
EN

Stack Overflow用户

提问于 2021-12-21 13:32:04

回答 1查看 45关注 0票数 0

我有一个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>

javascript

html

jquery

bootstrap-4

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-12-21 13:52:20

你可以这样做：

$("[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>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/70436313

复制

相似问题

问当i标记在DIV内单击时添加新类的最佳方法
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问当i标记在DIV内单击时添加新类的最佳方法EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问当i标记在DIV内单击时添加新类的最佳方法
EN