本文实例为大家分享了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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持阿兔在线工具。