对几个选项动态排序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>开发</title>
<!-- <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> -->
</head>
<style>
.checkbox_span {
min-width: 20px;
height: 20px;
display: inline-block;
vertical-align: middle;
margin: 0 10px;
background: #fff;
border: 1px solid #a6a6a6;
border-radius: 2px;
}
.checkbox_span_xuan {
background: #2068FF !important;
border: 1px solid #2068FF !important;
min-width: 20px;
height: 20px;
line-height: 20px;
border-radius: 2px;
color: #fff;
text-align: center;
}
</style>
<body>
<div>
<div class="checkbox_info">
<span id="pai_kuan_01" class="checkbox_span" onclick="selected_sorting(this.id);"></span>
<span id="pai_text_01">香蕉</span>
</div>
<div class="checkbox_info">
<span id="pai_kuan_02" class="checkbox_span" onclick="selected_sorting(this.id);"></span>
<span id="pai_text_02">苹果</span>
</div>
<div class="checkbox_info">
<span id="pai_kuan_03" class="checkbox_span" onclick="selected_sorting(this.id);"></span>
<span id="pai_text_03">菠萝</span>
</div>
<div class="checkbox_info">
<span id="pai_kuan_04" class="checkbox_span" onclick="selected_sorting(this.id);"></span>
<span id="pai_text_04">草莓</span>
</div>
</div>
<p><button onclick="tijiao();">提交</button></p>
</body>
</html>
<script>
// 提交
function tijiao() {
var num = document.querySelectorAll("div.checkbox_info");
var num_tmp = 0;
var sorting_problem = '';
for (var i = 1; i <= num.length; i++) {
var pai_id = 'pai_kuan_0' + i;
var if_value = document.getElementById(pai_id).innerHTML;
// console.log(if_value);
// 判断是否为空
if (if_value) {
// 有值,说明选中了
var text_id = 'pai_text_0' + i;
var if_text = document.getElementById(text_id).innerHTML;
var last_tmp = if_value + '.' + if_text + ',';
sorting_problem += last_tmp;
}
}
if (sorting_problem == null || sorting_problem == "" || sorting_problem == undefined) {
alert('至少选择一项');
var href_id = "#sorting_problem";
location.href = href_id;
return false;
}
console.log(sorting_problem);
}
// 排序特效
function selected_sorting(obj) {
// console.log(obj);
var num = document.querySelectorAll("div.checkbox_info");
// 判断前面有多少个有值的
var num_tmp = 0;
for (var i = 1; i <= num.length; i++) {
var pai_id = 'pai_kuan_0' + i;
var if_value = document.getElementById(pai_id).innerHTML;
if (if_value) {
// console.log('循环每个选项'+ifvalue);
num_tmp += 1;
}
}
// console.log(num_tmp);
//判断当前点击是否有值
var obj_value = document.getElementById(obj).innerHTML;
if (obj_value) {
// console.log('当前点击有值');
document.getElementById(obj).innerHTML = '';
document.getElementById(obj).classList.remove("checkbox_span_xuan");
for (var i = 1; i <= num.length; i++) {
var pai_id = 'pai_kuan_0' + i;
var if_value = document.getElementById(pai_id).innerHTML;
// id值大于点击选项的全部-1
if (if_value !== obj_value && if_value > obj_value) {
var auto_value = if_value - 1;
document.getElementById(pai_id).innerHTML = auto_value;
}
}
} else {
//没有值
// console.log('当前点击没有值');
var new_num_tmp = num_tmp + 1;
document.getElementById(obj).innerHTML = new_num_tmp;
document.getElementById(obj).classList.add("checkbox_span_xuan");
}
}
</script>