怎么限制當前的值為number,并且確定他的取值范圍，如下圖和代碼

說明

如圖，想要做一個星級評分，根據(jù)數(shù)值，確定下面的橙色星星的個數(shù)，如數(shù)值為3，即有3顆橙色星星

問題

如何限制當前的值<p id="number">33</p>為number,并且確定他的取值范圍為0-5，
然后覺得寫的代碼很重復了，
最后謝謝了
代碼

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div>
    <p id="number">33</p>
    <div class="box">
        <img src="images/startDark.jpg" alt="" class="box-item"/>
        <img src="images/startDark.jpg" alt="" class="box-item"/>
        <img src="images/startDark.jpg" alt="" class="box-item"/>
        <img src="images/startDark.jpg" alt="" class="box-item"/>
        <img src="images/startDark.jpg" alt="" class="box-item"/>
            
        <!-- 橙色 <img src="images/startBright.jpg" alt="" class="box-item"/>-->
    </div>
</div>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
    $(function(){
        var number = $('#number').html();
        function numberFn(obj){
            Math.max(obj,5);
            Math.min(0,obj);
            console.log(number);
        }
        numberFn(number);
        
        if(number == 0){
            $('.box .box-item').attr("src","images/startDark.jpg");
        }
        else if(number == 1){
            $('.box .box-item').eq(1).prevAll().attr("src","images/startBright.jpg");
        }
        else if(number == 2){
            $('.box .box-item').eq(2).prevAll().attr("src","images/startBright.jpg");
        }
        else if(number == 3){
            $('.box .box-item').eq(3).prevAll().attr("src","images/startBright.jpg");
        }
        else if(number == 4){
            $('.box .box-item').eq(4).prevAll().attr("src","images/startBright.jpg");
        }
        else{
            $('.box .box-item').attr("src","images/startBright.jpg");
        }
    })
</script>

</body>
</html>

回答

編輯回答

我以為

p標簽用戶又不能編輯，為什么要確認呢？

如果是想讓用戶編輯，可以用 <input type=number>

2018年6月12日 05:31

編輯回答

她愚我

優(yōu)化可以這樣寫：

var item = $('.box .box-item')
for (var i = 0; i < item.length; i++) {
    if (i < number) {
        item.eq(i).attr("src","images/startBright.jpg");
    } else {
        item.eq(i).attr("src","images/startDark.jpg");
    }
}

2017年4月7日 04:31

編輯回答

假灑脫

如何限定，不好弄啊，你又不是輸入，而是一個p標簽。只能判斷一下是不是number

var number = $('#number').html();
type of number == Number

至于下面的代碼優(yōu)化，

if(number==0){
$('.box .box-item').attr("src","images/startDark.jpg");
}else{
$('.box .box-item').eq(number).prevAll().attr("src","images/startBright.jpg");
}

2017年5月23日 22:44

編輯回答

柚稚

var number = $('#number').html() >> 0;
var stars = [, 1, 2, 3, 4];
var s = stars[number];
if (s) {
    $('.box .box-item').eq(s).prevAll().attr("src", "images/startBright.jpg");
} else {
    $('.box .box-item').attr("src", "images/startDark.jpg");
}

趕著吃飯只寫了上面的，下面補充一下。
第一行>> 0位移0可以把所有變量轉(zhuǎn)成整數(shù)，像"4.5"這種會變成4，"abc"這種會變成0;
第二行是建一個索引，只有值為1,2,3,4才能找到相應位置的值，其他的是undefined;
當然你簡寫成var stars = [, 1, 2, 3, 4][number]也行;
剩下的就用if判斷一下就好。