1 . 后台返回了 一个 Listlist 集合给前台ajax ;
2 . 前台页面显示console.log(data) 格式为 [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0] , 其中'0'
有可能是1 , 就是集合里面只会是0 或者 1
3 . 现在想获取每一个数字的下标 , 下面是js的ajax请求 , allStatus 是点击全选复选框后 , 所有value 的 数组
/* 点击全选复选框时触发的事件 */
$('#checkall').on("click", function() {
var url = $(this).parents('li').find('img');
$('input[name="station_name"]').each(function() {
$(this).prop("checked", true);
})
console.log(this)
$('input[name="station_name"]:checked').each(function(i) {
if (this.checked) {
allStatus[i] = this.value;
}
});
console.log(allStatus)
$.ajax({
data : {
'allStatus' : allStatus
},
type : "get",
url : "/PaStation/getAllStatus",
dataType : "text",
traditional : true,
success : function(data) {
arr = data
console.log(arr)
/*if (data == 1) {
url.attr('src', '../images/pademo_green.png');
} else {
url.attr('src', '../images/pademo_blue.png');
}*/
}
})
//url.attr('src', '../images/pademo_green.png');
});
4 . 现在想根据 , 0 或者 1 , 给每个复选框展示不同的图片 , 也就是 Green 或者 blue , 因为对js 实在不熟悉 , 卡了 很久 , 希望有前端大佬可以帮助我这个菜鸟
5 . 感谢大家的帮助 , 有什么对问题不清晰的地方可以留言 , 我详细说明一下 , 再次提前感谢各位大佬的帮助 谢谢
问题补充 : 下面是复选框内容的代码片段
<div class="box">
<ul class="box-list clearfix">
<li>
<div class="index">01</div>
<div class="img"><img src="../static/images/pademo_grey.png" th:src="@{/images/pademo_grey.png}" alt=""></div>
<label><input type="checkbox" name="station_name" id="1" value="1" />七莘路</label>
</li>
<li>
<div class="index">02</div>
<div class="img"><img src="../static/images/pademo_grey.png" th:src="@{/images/pademo_grey.png}"></div>
<label><input type="checkbox" name="station_name" id="2" value="2" />虹莘路</label>
</li>
$(".box").find("img").each(function(index,ele){//遍历所有图片
if(data[index] == 1){//判断图片对应的数据
$(this).attr('src', '../images/pademo_green.png');
}else if(data[index] == 0){
$(this).attr('src', '../images/pademo_blue.png');
}
})
遍历集合用
for(var el of data){
if (el === 1) {
url.attr('src', '../images/pademo_green.png');
} else {
url.attr('src', '../images/pademo_blue.png');
}
}
你checkbox个数是固定的还是动态的,你返回数组只有0、1,这怎么对应上呢?还是依次遍历对应上就行了、不需要关联关系,这样的话,
请用下面代码:
$.each($(".box").children(".img"),function(idx,val){//遍历你现有的checkbox上面的图片标签div
if(arr[idx]==1||arr[idx]=='arr[idx]==1')//判断你数组对应checkbox的下标的值,为空则blue
url.attr('src', '../images/pademo_green.png');
url.attr('src', '../images/pademo_blue.png');
});