今天在做一个新项目页面,需要用到一个评分功能。
后台会返回一个数值,然后前端需要拿到这个数值对其进行处理。
如果后台返回的数值是1,那么前端需要显示1星的图片,
如果后台返回的数值是2,那么前端需要显示2星的图片,
下面是我的做法,但是永远只取第一个div下面的data-num数值,无法做到多个调用显示不同的图片。
不知道怎么写,求帮忙
<div>
<div data-num="1" class="hotnumber"></div>
<img id="" class="setimg" src="" alt="">
</div>
<div>
<div data-num="3" class="hotnumber"></div>
<img id="" class="setimg" src="" alt="">
</div>
<div>
<div data-num="1" class="hotnumber"></div>
<img id="" class="setimg" src="" alt="">
</div>
$(document).ready(function(){
var num = parseFloat($('.hotnumber').attr('data-num'));
if(num>=1&&num<2) {
$('.setimg').attr('src','/img/hot-01.png')
} else if (num>=2&&num<3) {
$('.setimg').attr('src','/img/hot-02.png')
} else if (num>=3&&num<4) {
$('.setimg').attr('src','/img/hot-03.png')
}
});
<div>
<div data-num="1" class="hotnumber"></div>
<img id="" class="setimg" src="" alt="">
</div>
<div>
<div data-num="3" class="hotnumber"></div>
<img id="" class="setimg" src="" alt="">
</div>
<div>
<div data-num="1" class="hotnumber"></div>
<img id="" class="setimg" src="" alt="">
</div>
<script>
$(document).ready(function(){
$.each($('.hotnumber'),function(index, item){
const num = $(this).attr('data-num')
$(this).siblings('.setimg').attr('src','/img/hot-0'+num+'.png')
console.log(num)
})
});
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js"></script>
</head>
<body>
<div>
<div data-num="1" class="hotnumber"></div>
<img id="" class="setimg" src="" alt="">
</div>
<div>
<div data-num="3" class="hotnumber"></div>
<img id="" class="setimg" src="" alt="">
</div>
<div>
<div data-num="1" class="hotnumber"></div>
<img id="" class="setimg" src="" alt="">
</div>
</body>
<script type="text/javascript">
$(document).ready(function(){
$.each($('.hotnumber'),(index, e) => {
console.log($(e).attr('data-num'))
var num = parseFloat($(e).attr('data-num'));
if(num>=1&&num<2) {
$('.setimg').attr('src','/img/hot-01.png')
} else if (num>=2&&num<3) {
$('.setimg').attr('src','/img/hot-02.png')
} else if (num>=3&&num<4) {
$('.setimg').attr('src','/img/hot-03.png')
}
})
});
</script>
</html>