zoukankan      html  css  js  c++  java
  • 使用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");
                    }
                });
            }) 
  • 相关阅读:
    mysql数据库函数 concat 字段类型转化、字段拼接
    SSH2中的No result defined for action的问题
    导致表单重复提交(两次)的原因--css{url()}与a标签
    详解jar命令打包生成双击即可运行的Java程序
    21IO流 和缓冲流 和处理流
    20File
    19(1)hashmap,hashtable
    IntelliJ IDEA注册码激活
    19映射
    18泛型
  • 原文地址:https://www.cnblogs.com/FanJava/p/9078656.html
Copyright © 2011-2022 走看看