使用jquery实现获取除this(当前选定)以外的元素

今天做项目时,要求完成功能评价的分类,即好评,差评,中评。遇到一个问题,如何在选定一个评论类型时,该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");
                }
            });
        }) 

 

posted @ 2018-05-23 18:36  MichaelKai  阅读(4455)  评论(0编辑  收藏  举报