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

最新推荐文章于 2022-10-10 22:39:03 发布

面壁思过程

最新推荐文章于 2022-10-10 22:39:03 发布

阅读量778

点赞数

文章标签：淘宝详情页选择套餐

本文链接：https://blog.csdn.net/Candy_mi/article/details/91854547

版权

jquery 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

代码相关:

<!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实现按照相关的逻辑进行更改即可

面壁思过程

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
jquery淘宝详情页选择套餐实现

代码相关:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http...
复制链接

扫一扫