zoukankan      html  css  js  c++  java
  • 多属性选择

    1.仿制淘宝多属性选择,依赖jQuery,主要利用二维数组

    2.以下是代码

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <style>
                input{
                    width: 50px;
                    height: 35px;
                    background: orange;            
                }
            </style>
        </head>
        <body>
            <div class="container">
                  <div class="row">
                    <input type="button" value="红" />
                    <input type="button" value="黄" />
                    <input type="button" value="蓝"/>
                    <input type="button" value="白"/>
                    <input type="button" value="军绿"/>
                    
                </div>
            
                <div class="row">
                    <input type="button" value="xl"/>
                    <input type="button" value="xxl"/>
                    <input type="button" value="xxxl"/>
                </div>
            
                <div class="row">
                    <input type="button" value="纯棉"/>
                    <input type="button" value="牛仔"/>
                    <input type="button" value="针织"/>
                </div>
                
                <div class="row">
                    <input type="button" value="A"/>
                    <input type="button" value="B"/>
                    <input type="button" value="C"/>
                    <input type="button" value="D"/>
                    <input type="button" value="E"/>
                </div>
              </div>    
        
            <div class="box">
                
            </div>
        
            <script src="jquery-1.11.1.min.js"></script>
            <script type="text/javascript">
                
                //给按钮添加选中取消标志
                $(".container .row input").attr("data-check",1);    
                //获取矩阵按钮
                function getBtn(ele){
                    var arr=[];
                    var contain = $(ele);
                    for(let i=0;i<contain.length;i++){
                        arr.push($.makeArray(contain[i].children));
                    }
                    return arr;
                }
                //生成二维数组
                var data = getBtn(".container .row"); 
                
            
                //判断点击的元素是否在二维数组中
                function getIndex(ele,map){
                    var res=[];
                    for(let i=0;i<map.length;i++){
                        for(let j=0;j<map[i].length;j++){
                            if(map[i][j] == ele){
                                res = [i,j];
                            }
                        }
                    }
                    return res;            
                }
               
                //生成默认值
                function init(data){
                    var arr = [];
                    for(let i = 0;i<data.length;i++){
                        arr.push([i,0]);
                        //默认选中的样式
                        $(data[i][0]).attr("data-check",0);
                        $(data[i][0]).css("background","gray");    
                    }
                    return arr;
                }
                var defaultVal = init(data);
                
                
                //渲染函数
                function myRender(s,data){
                        var str="";
                        for(let i = 0; i<data.length;i++){                    
                            str+=data[s[i][0]][s[i][1]].value+",";    
                        }                    
                        $(".box").append("<p>"+str+"</p>");
                }
                
                //绑定点击事件
                $(".container .row input").on("click",function(){
                    var _this=$(this);
                    //判断在哪行那列
                    var res = getIndex(_this[0],data);
                    
                    if(_this.attr("data-check")==1 ){
                        _this.attr("data-check",0);
                        _this.css("background","gray");
                        _this.siblings().css("background","orange")    
                        _this.siblings().attr("data-check",1)
                            
                        //插入要渲染的数据
                        defaultVal.splice(res[0],1,res);
                        //渲染数据
                        myRender(defaultVal,data);
                    
                    }else{
                        //点击取消,替换回这一行的默认值
                        defaultVal[res[0]] = [res[0],0];
                        myRender(defaultVal,data);
                        _this.attr("data-check",1);
                        if(res[1]!==0){
                            _this.css("background","orange");
                        }
                    }
            })
            
            </script>
        </body>
    </html>

     出处www.cnblogs.com/chengyunshen/p/7244278.html

  • 相关阅读:
    次小生成树模板(poj1679)
    ISAP模板
    ZOJ3781
    Uva12663
    LightOJ1089
    网络流DINIC模板
    FZU2030(括号匹配)
    NOIP2011提高组(选择客栈)
    DRF之视图家族
    DRF多表设计与ModelSerializer组件
  • 原文地址:https://www.cnblogs.com/aten/p/8638293.html
Copyright © 2011-2022 走看看