实现左右移
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-3.2.1.js"></script>
</head>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
#xh {
float: left;
width: 112px;
text-align: center;
background: #F3F3F3;
line-height: 20px;
font-size: 14px;
font-weight: 400px;
}
#middle {
width: 80%;
margin: 0px auto;
height: 100px;
}
.wrap ul li {
float: left;
width: 25px;
height: 20px;
margin-left: 3px;
float: left;
text-align: center;
cursor: pointer;
font-size: 12px;
background: #F3F3F3;
line-height: 20px;
}
.wrap ul li:last-child {
margin-right: 0;
}
.wrap li.act {
background: red;
color: white;
}
#xh {
float: left;
width: 112px;
text-align: center;
background: #F3F3F3;
line-height: 20px;
font-size: 14px;
font-weight: 400px;
}
.qingkong {
margin-left: 5px;
width: 35px;
background-color:#F3F3F3;
float: right;
}
</style>
<body>
<div id="middle">
<div class="wrap">
<div id="xh">模拟选号:</div>
<ul id="ull">
</ul>
<button type="button" class="right">右移</button>
<button type="button"class="left" >左移</button>
</div>
</div>
</body>
</html>
<script type="text/javascript">
$(document).ready(function() {
$(".wrap").on("click", "li", function addfood() {
$(this).toggleClass("act");
var max = $(this).parent().children(".act").length;
console.log(max);
if(max > 6) {
$(this).removeClass("act");
alert("最多只能选择6个");
}
var cstr = "";
cstr = $(this).parent().children(".act").text();
if($(this).hasClass("act")) {
$(".myselt").val(cstr);
} else {
$(".myselt").val(cstr);;
}
});
var mnxh = ["01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30", "31", "32", "33"];
var str = "";
for(var i = 0; i < mnxh.length; i++) {
str = str + "<li>" + mnxh[i] + "</li>";
}
$(".wrap #ull").html(str);
});
</script>
- 1 回答
- 0 关注
- 1646 浏览
相关问题推荐
添加回答
举报
0/150
提交
取消