jquery淘宝详情页选择套餐实现

代码相关:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><script src="https://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script><title>Document</title><style>.row{}.box{display: flex;flex-wrap: nowrap;}.span{display: inline-block;margin-right: 10px;background: #313131;color: #fff;padding: 0 10px;}.span.active{background: red;}</style>
</head>
<body><div class="page"><div class="row"><p class="tittle"></p><div class="box"><div class="span"></div></div></div></div><br><br><br><br><button class="submit">提交</button>
</body>
<script>var attr=[];var json=[{title:'娃娃机尺寸',parmas:[20]},{title:'娃娃机颜色',parmas:['白色']},{title:'娃娃机版本',parmas:['新版','旧版']}]var html='';for(let i=0;i<json.length;i++){var childhtml='';for(let j=0;j<json[i].parmas.length;j++){childhtml+='<div class="span "  data-row='+i+'>'+json[i].parmas[j]+'</div>'}html+='<div class="row"><p class="tittle">'+json[i].title+'</p> <div class="box">'+childhtml+'</div></div></div>'}$('.page').html(html);$(' .page').on('click', '.span', function (event) {var value=$(this).text();var row=event.currentTarget.dataset.row;   //第几行//先判断值是否存在 存在设为空// console.log(attr.indexOf(value))if(attr.indexOf(value)>-1){attr[row]='';$(this).removeClass('active')}else{attr[row]=value;$(this).addClass('active');$(this).siblings().removeClass('active')}console.log(attr)});$('.submit').click(function(){if(attr.length!=3){alert('请把套餐填写完整');return;}   for(let i=0;i<attr.length;i++){  if(attr[i]==''||attr[i]==undefined||attr.length!=3){     alert('请把套餐填写完整');return;}}console.log('这是最终提交的值'+attr.join(','))})</script>
</html>

vue实现按照相关的逻辑进行更改即可

jquery淘宝详情页选择套餐实现相关推荐

弘辽科技：优秀的淘宝详情页应包含哪些内容？
原标题<弘辽科技:优秀的淘宝详情页应包含哪些内容?> 淘宝详情页是影响顾客是否愿意下单的重要因素之一.宝贝的详情页不但会影响商品的转化,而且也反映出客户浏览商品的时长,对权重排名以及流量的 ...
用原生js实现淘宝详情页图片放大镜效果
这个功能是我在模仿淘宝详情页的时候做出来的,最初版本对于非1:1比例的图片没有做处理,后续对程序进行了完善和逻辑上修改,形成了当前的程序. 废话不多说,直接进入正题了,先上个效果图先放上这段功能的h ...
Android模仿淘宝详情页界面
话不多说-先上效果图: 图1中主要需要实现的效果: 1.轮播图 2.顶部导航栏的渐变 3.顶部导航栏随着滑动的位置选择对应的值以及点击滑动到对应位置 Android模仿淘宝详情页界面文件:url80. ...
如何一键生成手机淘宝详情页？
无线端购物对于现在来说是个趋势,但是我们要如何去做好它?首先,我们能做的就是先把手机端的淘宝详情页搞好,这个应该大家都会吧,那就是我们经常发布宝贝的页面,电脑端详情隔壁就有一个手机端的详情页发布.但是 ...
类似淘宝详情页SKU页面
下载地址类似淘宝详情页SKU页面样式代码,jQuery实现的多图切换效果. dd:
淘宝详情页分发推荐算法总结：用户即时兴趣强化
本文介绍淘宝详情页全网分发场景的机制. 商品详情页是手淘内流量最大的模块之一,它加载了数十亿级商品的详细信息,是用户整个决策过程必不可少的一环.这个区块不仅要承接用户对当前商品充分感知的诉求,同时也要 ...
制作淘宝详情页时要注意哪些细节？
对于淘宝开店的商家们来说,都知道商品的标题.主图.价格以及详情页都是影响着顾客是否下单的重要因素.那么怎么制作淘宝详情页才能够提升转化呢?接下来小编就给大家详细的讲一讲制作详情页细节有哪些. 1.制作 ...
仿淘宝详情页直接上代码
仿淘宝详情页直接上代码 package com.example.liketitledemo;import android.content.Context; import android.graphi ...
足迹推荐位,淘宝足迹推荐位,旺旺打标足迹显示问题,详情页足迹推荐,淘宝详情页的下拉出现足迹,v兔电商
淘宝的千人千面算法已经连带足迹推荐都开始个性化了.淘宝详情页的下拉出现足迹实现方法. 一.首先了解一下什么是足迹推荐位: 在最新版本手淘版本9.00.0之后的版本,点击到任意到任意的商品详情页中下拉会 ...

jquery淘宝详情页选择套餐实现

jquery淘宝详情页选择套餐实现相关推荐

最新文章

热门文章