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

2024-04-02 19:04:59 837人浏览薄情痞子

摘要

本文实例为大家分享了Jquery实现淘宝详情页选择套餐的具体代码，供大家参考，具体内容如下代码相关: <!DOCTYPE html> <html lang="e

本文实例为大家分享了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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程网。

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: jquery实现淘宝详情页选择套餐

本文链接: https://www.lsjlt.com/news/141787.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档

去做题

猜你喜欢

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

本文实例为大家分享了jquery实现淘宝详情页选择套餐的具体代码，供大家参考，具体内容如下代码相关: <!DOCTYPE html> <html lang="e...

99+

2024-04-02
JavaScript实现淘宝购物件数选择

本文实例为大家分享了JavaScript实现淘宝购物件数选择的具体代码，供大家参考，具体内容如下实现一个简易的淘宝购物件数量的选择算法，通过鼠标点击“+”、...

99+

2022-11-13

js淘宝购物件数选择 js淘宝购物选择 js购物件数选择
NestScrollView嵌套RecyclerView实现淘宝首页滑动效果

目录一.概述二.开搞三.处理嵌套滑动四.实现惯性滑动一.概述本文主要实现淘宝首页嵌套滑动，中间tab吸顶效果，以及介绍NestScrollView嵌套RecyclerView处理滑...

99+

2024-04-02
videojs+swiper实现淘宝商品详情轮播图

本文实例为大家分享了videojs+swiper实现淘宝商品详情轮播图的具体代码，供大家参考，具体内容如下这个引用了videojs和swiper。实现效果类似淘宝商品详情中的轮播图...

99+

2024-04-02
Vue实现淘宝购物车三级选中功能详解

最近在练习商城项目，记录下实现购物车三级选中的过程（小白一个，水平很菜）效果图：实现： 1.全选时所有商品+店铺全部选中；反之全部取消选中 2.店铺选中时，当前店铺内所有商品选...

99+

2024-04-02
jQuery如何实现选择或者不选页面上全部复选框

这篇文章主要为大家展示了“jQuery如何实现选择或者不选页面上全部复选框”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“jQuery如何实现选择或者不选页面上全部复选框”这篇文章吧。选择或者不选...

99+

2023-06-27
vue实现商品详情页功能之商品选项卡

本文实例为大家分享了vue实现商品详情页功能之商品选项卡的具体代码，供大家参考，具体内容如下用户点击商品进入商品详情页，默认显示第一个小图对应的大图，然后鼠标滑到小图上，大图也会发...

99+

2024-04-02