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");
                    }
                });
            }) 
  • 相关阅读:
    selenium之css selector
    selenium之xpath
    selenium的一些概念
    HTML基础(四)JS
    HTML基础(三)DOM操作
    HTML基础(二)CSS
    HTML基础(一)HTML标签
    python学习笔记(六)发邮件、写日志、操作redis、导入模块
    python学习笔记(五)模块、第三方模块安装、模块导入
    python学习笔记(四)函数(下)、模块、集合
  • 原文地址:https://www.cnblogs.com/FanJava/p/9078656.html
Copyright © 2011-2022 走看看