如何用JQ控制多个相同的class中的样式style的width的变化 如下图
怎么用JQ控制多个相同的class中的样式style的width的变化 如下图
在div中自定义一个属性然后赋值1分的话星星就会填满一半 2分就填满星星 以此类推..根据分值改变 div的长度 怎么实现 总分10分 在线等前端大神解答！
------解决思路----------------------
虽然我没做过，但我感觉是这样的先定义一div，宽高等于你星星的高度和宽度，然后再定义一个子div，当获值一分的时候算出weith=1/2=50%，用JS给子div赋值height=100%，weith:weith 。思路感觉是这样的
------解决思路----------------------
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>test</title>
<style type="text/css">
ul,li{
list-style: none;
}
ul{
width: 250px;height: 30px;
}
li{
border: 1px #ccc solid;height: 30px;width:30px;float: left;margin-left: 5px;
}
.yellow{
background-color: yellow;
}
.grey{
background-color: grey;
}
.black{
background-color: black;
}
</style>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
var starArr=[3,6,9];//得分的数组。当然也可以有别的信息在里面。
var yellow = 0; //黄色三角的数量
var grey = 0 ; //半黄半灰三角。
var black = 0; //黑色三角。
$.each(starArr,function(i,result){
yellow = parseInt(result/2);
grey = result%2;
black = 5 - yellow - grey;
$(".demo").append('<ul class="star_ul">'+result+'分</ul>');
for(var i =0 ;i<yellow;i++ ){
$(".star_ul:last").append('<li class="yellow"></li>');
}
for(var j= 0;j<grey; j++){
$(".star_ul:last").append('<li class="grey"></li>');
}
for(var k= 0;k<black; k++){
$(".star_ul:last").append('<li class="black"></li>');
}
});
})
</script>
<div class="demo">
</div>
<script src="jq/jquery-1.11.2.min.js"></script>
</body>
</html>
我这里是用的不同的颜色分别代表 黄星星，半星，灰星。
你自己给css替换上对应的背景图片就可以用了。
------解决思路----------------------
------解决思路----------------------
对，是图片，4楼跟楼上的思路很正点。
我又做了一个，不过其实楼上的就很完美了。不过图片之间没有间距。
主要是上下两层。 下层是灰色星星。上层是黄色。 调整上层width这个思路。
在div中自定义一个属性然后赋值1分的话星星就会填满一半 2分就填满星星 以此类推..根据分值改变 div的长度 怎么实现 总分10分 在线等前端大神解答！
------解决思路----------------------
虽然我没做过，但我感觉是这样的先定义一div，宽高等于你星星的高度和宽度，然后再定义一个子div，当获值一分的时候算出weith=1/2=50%，用JS给子div赋值height=100%，weith:weith 。思路感觉是这样的
------解决思路----------------------
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>test</title>
<style type="text/css">
ul,li{
list-style: none;
}
ul{
width: 250px;height: 30px;
}
li{
border: 1px #ccc solid;height: 30px;width:30px;float: left;margin-left: 5px;
}
.yellow{
background-color: yellow;
}
.grey{
background-color: grey;
}
.black{
background-color: black;
}
</style>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
var starArr=[3,6,9];//得分的数组。当然也可以有别的信息在里面。
var yellow = 0; //黄色三角的数量
var grey = 0 ; //半黄半灰三角。
var black = 0; //黑色三角。
$.each(starArr,function(i,result){
yellow = parseInt(result/2);
grey = result%2;
black = 5 - yellow - grey;
$(".demo").append('<ul class="star_ul">'+result+'分</ul>');
for(var i =0 ;i<yellow;i++ ){
$(".star_ul:last").append('<li class="yellow"></li>');
}
for(var j= 0;j<grey; j++){
$(".star_ul:last").append('<li class="grey"></li>');
}
for(var k= 0;k<black; k++){
$(".star_ul:last").append('<li class="black"></li>');
}
});
})
</script>
<div class="demo">
</div>
<script src="jq/jquery-1.11.2.min.js"></script>
</body>
</html>
我这里是用的不同的颜色分别代表 黄星星，半星，灰星。
你自己给css替换上对应的背景图片就可以用了。
------解决思路----------------------
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title> 页面名称 </title>
<style type="text/css">
.demo {
width: 105px;
height: 24px;
background-image: url("http://c.****img.cn/jifen/images/xunzhang/xunzhang/lanhua.png");
}
.demo div {
width: 0%;
height: 24px;
background-image: url("http://c.****img.cn/jifen/images/xunzhang/xunzhang/huanghua.png");
}
</style>
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$(".demo").each(function () {
$(this).find("div").css("width",$(this).data("scroe")*10+"%");
});
});
</script>
</head>
<body>
<div class="demo" data-scroe="1"><div></div></div>
<div class="demo" data-scroe="2"><div></div></div>
<div class="demo" data-scroe="3"><div></div></div>
<div class="demo" data-scroe="4"><div></div></div>
<div class="demo" data-scroe="5"><div></div></div>
<div class="demo" data-scroe="6"><div></div></div>
<div class="demo" data-scroe="7"><div></div></div>
<div class="demo" data-scroe="8"><div></div></div>
<div class="demo" data-scroe="9"><div></div></div>
<div class="demo" data-scroe="10"><div></div></div>
</body>
</html>
------解决思路----------------------
对，是图片，4楼跟楼上的思路很正点。
我又做了一个，不过其实楼上的就很完美了。不过图片之间没有间距。
主要是上下两层。 下层是灰色星星。上层是黄色。 调整上层width这个思路。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>test</title>
<style type="text/css">
.demo{background-image: url(bg1.png);
width: 180px;
height: 32px;
margin-top: 10px;
}
.yellowstar{
background-image: url(bg2.png);
width: 180px;
height: 32px;
}
</style>
</head>
<body onload="showStars()">
<script src="jq/jquery-1.11.2.min.js"></script>
<script type="text/javascript">
function showStars(){
var domLength = $(".demo").length;
for(var f=0;f<domLength;f++){
var yellow = 0; //黄色三角的数量
var grey = 0 ; //半黄半灰三角。
var black = 0; //黑色三角。
var result = parseInt($(".demo").eq(f).attr("data-scroe")); //获取对应的分值。
var yellowstarWidth = 0;
yellowstarWidth = 16*result + (Math.ceil(result/2) -1)*5; //计算宽度
$(".yellowstar").eq(f).css("width",yellowstarWidth);
}
}
</script>
<div class="demo" data-scroe="3" ><div class="yellowstar"></div></div>
<div class="demo" data-scroe="6" ><div class="yellowstar"></div></div>
<div class="demo" data-scroe="9" ><div class="yellowstar"></div></div>
<div class="demo" data-scroe="10" ><div class="yellowstar"></div></div>
</body>
</html>