<!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 row1">

                <input type="button" value="红" />

                <input type="button" value="黄" />

                <input type="button" value="蓝"/>

                <input type="button" value="白"/>

                <input type="button" value="军绿"/>

            </div>

            <div class="row row2">

                <input type="button" value="xl"/>

                <input type="button" value="xxl"/>

                <input type="button" value="xxxl"/>

            </div>

            <div class="row row3">

                <input type="button" value="纯棉"/>

                <input type="button" value="牛仔"/>

                <input type="button" value="针织"/>

            </div>

          </div>    

        <!-- <script src="jquery-3.2.1.min.js"></script> -->

		<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>

        <script type="text/javascript">

			$(".container .row input").on("click",function(){

				var _this = $(this);

				_this.attr("st",1)

				const arr = [];

				$.each($(".container .row1 input[st=1]"),function(index,val){

					 const  key1 = val.value;

					$.each($(".container .row2 input[st=1]"),function(index,val){

						const  key2 = val.value;

				    	$.each($(".container .row3 input[st=1]"),function(index,val){

							const  key3 = val.value;

							if(val){

								arr.push([key1,key2,key3])

							}

						})

					})

				})

				console.log(arr,"arr")

			})

        </script>

    </body>

</html>

jq sku实现的更多相关文章

  1. 一个商品SKU是怎么生成的

    首先说一说什么是SKU.......自己百度去... 类似京东上面,未来人类S5这个台笔记本(没错,我刚入手了) 都是S5这个型号,但是因为CPU,显卡,内存,硬盘等不同,价格也不一样.CPU,显卡, ...

  2. jq选择器基础

    Jquery $代表选择器 使用jq必须要导入jq文件 <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js&qu ...

  3. JQ实现判断iPhone、Android设备

    最近做了一版微信宣传页,通过JQ来判断设备,并进行下载 微信内置浏览器对下载链接进行了屏蔽,所以先进行判断,如果是微信内置浏览器,则跳转应用宝链接,如果不是,则判断是iPhone/Adroid/PC ...

  4. jq.validate隐藏元素忽略验证

    jq.validate隐藏元素忽略验证 现在有这样一个需求,当触发某类事件时候,需要在页面中显示input框,但是当不需要加载页面中的元素时候,进行隐藏.在这个需求的前提下,程序中对于input中的输 ...

  5. jq.validate 自定义验证两个日期

    jq.validate 自定义验证两个日期 首先定义有一个表单,date1和date2是属于表单的元素,若date1大于date2,返回false:若date1<date2,返回true.使用j ...

  6. jq方法中 $(window).load() 与 $(document).ready() 的区别

    通过自学进入了前端的行列,只知道在js中,一开头就写一个: window.onload = function(){ //doing sth} 然后所有的乱七八糟的代码全塞里面,大概知道window.o ...

  7. jq 根据值的正负变色

    效果图这样: 意思就是根据最后的百分值变色,值为负变绿色,值为正变红色. 所以只要取到那个标签里的值了,就能根据正负的判断决定颜色. 我的html部分这样: /*不过他们都说我的dom结构不太合理,同 ...

  8. jq 个性的隔行变色

      效果图大致这样: 我的html格式部分这样:/*不过他们都说我的dom结构不太合理,同意.BUT,我就是不想写表格而写成的这样的,所以后面jq部分也要迁就了*/ <div class=&qu ...

  9. 关于JQ toggle 的注意事项

    1.9.1以后的版本,好像不支持 jq 的 toggle function的用法啦.

随机推荐

  1. Json文件删除元素

    方法1:delete 注意,该方法删除之后的元素会变为null,并非真正的删除!!! 举例: 原json: { "front" : { "image" : [ ...

  2. 本地oracle可以通过localhost连接,无法通过ip地址连接解决方法，oracle远程连接配置

    Oracle11g安装后只有本地可以连接,远程无法连接,而且本地只能配置成localhost配置成IP地址也无法连接. 这是因为安装oracle的时候没有配置远程的监听,默认的监听是localhost ...

  3. Xman冬令营writeup

    做题一时爽,期末火葬场,一晚上水了三题,跪求期末不挂,老老实实去复习.祝各位表哥冬令营玩的开心. 中二的成长之路 很容易发现图片本身就是个压缩包,里面还有个图片,但是加密了所以需要我们求出压缩包的密码 ...

  4. Web jsp开发学习——数据库的另一种连接方式（配置静态数据库连接池）

    1.导包   2.找到sever里的sever.xml,配置静态数据库连接池 <Context docBase="bookstore" path="/booksto ...

  5. linux常用命令(14)which命令

    我们经常在linux要查找某个文件,但不知道放在哪里了,可以使用下面的一些命令来搜索:    which  查看可执行文件的位置.   whereis 查看文件的位置.    locate   配合数 ...

  6. Java并发编程之程序运行堆栈分析

    Java程序运行的堆栈分析 1.JVM运行时数据区 JVM通过加载class文件的数据来执行程序.JVM在运行时会划分不同的区域以存放数据.如下图所示: 线程共享部分:所有线程都能访问这块内存的数据, ...

  7. SQL-T

    Mysql函数.语句记录 增加 INSERT INTO table_name (列1, 列2,...) VALUES (值1, 值2,....) 删除 DELETE FROM 表名称 WHERE 列名 ...

  8. LeetCode.1137-第N个泰波那契数(N-th Tribonacci Number)

    这是小川的第409次更新,第441篇原创 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第260题(顺位题号是1137).Tribonacci(泰波那契)序列Tn定义如下: 对于n&g ...

  9. 记录一次MySQL进程崩溃，无法重启故障排查

    最近程序在跑着没几天,突然访问不了,查看应用进程都还在.只有数据库的进程down掉了.于是找到日志文件看到如下错误 -- :: [Note] InnoDB: Initializing buffer p ...

  10. Bootstrap+JSP实例学习笔记一.简单的带登录功能的首页

    前言 Bootstrap 是流行的 HTML.CSS 和 JS 框架,用于开发响应式布局.移动设备优先的 WEB 项目.源自于twiteer内部的开发框架. 当前(2019-05)最新版本是v3.3. ...