<!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. leetcode131分割回文串

    class Solution { public: vector<vector<string>> ans; bool isok(string s){ ; ; while(i< ...

  2. 手把手教你 iOS通过自己的服务器实现应用分发

    第一步:打包ipa 1:可以是development.ad-hoc.enterprise任何一种打包方式,导出的ipa, 稍后会将安装包上传到服务器上. 2:如下图,箭头指的要打勾 3.点击下一步后出 ...

  3. JQUERY的$(function(){})和window.onload=function(){}的区别

    在Jquery里面,我们知道入口函数有两种写法:$(function(){}) 和$(document).ready(function(){}) 作用类似于传统JavaScript中的window.o ...

  4. Linux性能分析之上下文切换

    而在每个任务运行前,CPU 都需要知道任务从哪里加载.又从哪里开始运行,也就是说,需要系统事先帮它设置好 CPU 寄存器和程序计数器 CPU 寄存器,是 CPU 内置的容量小.但速度极快的内存.而程序 ...

  5. mybatisplus EntityWrapper 常用方法

    1. #WHERE (issue_type = ?) AND (status = ? OR status = ? OR status = ?) EntityWrapper wrapper=new En ...

  6. java base64相关

    文件转Base64: public static String imgToBase64(InputStream inStream) { byte[] data = null; try { //avai ...

  7. 03 vue项目结构

    上一篇已介绍根据vue-cli创建项目,本篇介绍根据vue-cli官方脚手架创建的项目的项目结构. 一.图看结构 build  [webpack配置]         webpack相关配置,都已经配 ...

  8. 网络实验 04-利用三层交换机实现VLAN间路由

    利用三层交换机实现VLAN间路由 一.实验目标 掌握交换机Tag VLAN 的配置 掌握三层交换机基本配置方法 掌握三层交换机VLAN路由的配置方法 通过三层交换机实现VLAN间相互通信 二.实验背景 ...

  9. 升级Nginx1.14.1以上版本

    一.编译Nginx ①.下载Nginx最新版 目前Nginx最新版是今年11月份发布的 1.9.7 版本,反正1.9+是没有稳定版,所以干脆弄个最新版:   cd /usr/local/src   w ...

  10. C++笔记（1）——Anniversary

    世界太喧闹,不如敲代码. 直接上题目: Zhejiang University is about to celebrate her 122th anniversary in 2019. To prep ...