今天做項目時,要求完成功能評價的分類,即好評,差評,中評。遇到一個問題,如何在選定一個評論類型時,該div顏色改變,其他評論類型的div顏色不變。
在使用$(this).attr()時,表示當前元素的某一屬性,而要獲取其他元素的屬性 使用siblings方法。 $(this).siblings().attr()
<div class='evaluate-nav clearfix' id="evaluate"> <div class='e-nav-item f-l on' id="allEvaluate"> <span>全部評價</span> <span id="ae"></span> </div> <div class='e-nav-item f-l' id="goodEvaluate"> <span>好評</span> <span id="ge"></span> </div> <div class='e-nav-item f-l' id="midEvaluate"> <span>中評</span> <span id="me"></span> </div> <div class='e-nav-item f-l' id="badEvaluate"> <span>差評</span> <span id="be"></span> </div> </div>
$("#evaluate").on('click','div',function(e){
e.preventDefault();
var idA = $(this).attr('id');
var scoreType = 0;
if (idA == "allEvaluate") {
scoreType = null;
$(this).attr('class','e-nav-item f-l on');
$(this).siblings().attr('class','e-nav-item f-l');
} else if (idA == "midEvaluate") {
scoreType = 1;
$(this).attr('class','e-nav-item f-l on');
$(this).siblings().attr('class','e-nav-item f-l');
} else if (idA == "badEvaluate") {
scoreType = 2;
$(this).attr('class','e-nav-item f-l on');
$(this).siblings().attr('class','e-nav-item f-l');
} else if (idA == "goodEvaluate") {
$(this).attr('class','e-nav-item f-l on');
$(this).siblings().attr('class','e-nav-item f-l');
}
$.fd.ajax({
url : 'api/scores',
type: 'get',
async: true,
data : {start:0,length:10,condition:{productId:id,scoreType:scoreType}},
success: function(d) {
//清空數據
$(".evaluate-list").empty();
//顯示數據
$(".evaluate-list").getEvaluate({
maxNum:5
},d.data.data);
$("#checkEvaluate").modal("show");
}
});
})
