博客列表 >点击商品选中效果-2019年1月22日22点10分

点击商品选中效果-2019年1月22日22点10分

kszyd的博客
kszyd的博客原创
2019年01月24日 13:20:29593浏览

不知为什么没有点击效果,请老师检查指导下,谢谢、


实例

<!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">
    <title>点击商品选中效果</title>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <style>
        *{margin: 0 auto;padding: 0;}
        .top{
            width: 402px;
            height: 35px;
            line-height: 35px;
            text-align: center;
            margin-top: 50px;
            background: #c40000;
            color: #fff;
        }
        .main{
            width: 400px;
            height: 400px;
            border: 1px solid #c40000;
        }
        p{
            width: 400px;
            height: 26px;
            margin-top: 10px;
        }
        b{
            width: 90px;
            height: 26px;
            line-height: 26px;
            text-align: center;
            font-size: 12px;
            color: #838383;
            border: 1px solid #ccc;
            float: left;
            margin-left: 5px;
        }
        span{
            width: 90px;
            height: 26px;
            line-height: 26px;
            text-align: center;
            font-size: 12px;
            color: #838383;
            border:1px solid #ccc;
            display: block;
            float: left;
            margin-left: 5px;
        }
        span:hover {
            cursor: pointer;
        }
        button{
            width: 120px;
            height: 35px;
            background: #c40000;
            color: white;
            border: 0;
        }
        button:hover {
            cursor: pointer;}
        .notice{
            border: 0;
        }
        .select{
            border: 2px solid #c40000;
            width: 88px;
            height: 24px;
            line-height: 24px;
            color: red;
        }
    </style>
</head>
<body>
        <div class="top">请选择信息后加入购物车</div>
        <div class="main">
            <p class="item" name="version">
                <b class="notice">版本</b>
                <span>ONE A2001</span>
                <span>ONE A0001</span>
                <span>ONE A1001</span>
            </p>
            <p class="item" name="color">
                <b class="notice">机身颜色</b>
                <span>白色</span>
                <span>黑色</span>
                <span>金色</span>
            </p>
            <p class="item" name="type">
                <b class="notice">套餐类型</b>
                <span>标配</span>
                <span>套餐一</span>
                <span>套餐二</span>
            </p>
            <p class="item" name="ram">
                <b class="notice">运行内存</b>
                <span>2GB</span>
                <span>3GB</span>
                <span>4GB</span>
            </p>
            <p class="item" name="rom">
                <b class="notice">机身内存</b>
                <span>16GB</span>
                <span>32GB</span>
                <span>64GB</span>
            </p>
            <p class="item" name="location">
                <b class="notice">产地</b>
                <span>中国大陆</span>
                <span>港澳台</span>
            </p>
            <p class="item" name="price">
                <b class="notice">价格</b>
                <span>999元抢购</span>
            </p>
            <p class="item1" name="num">
                <b class="notice">数量</b>
                <input type="number" value="1" style="width:40px;height:26px;">
            </p>
    
            <p style="margin-top:30px;margin-left:95px;">
                <button class="bu1" id="sub">加入购物车</button>
            </p>
        </div>
      <script>
          $(function(){
              $('span').click(function(){
                if($(this).hasClass('select')){
                    $(this).removeClass('select')
                }else{
                    $(this).addClass('select').siblings('span').removeClass('select')
                }
              })
              $('#sub').click(function(){ 
                  var form={}
                  var flag=true
                  $('.item').each(function(){
                      if($('this').children('span.select').length != 1){
                        //   alert($(this).find('.notice').html()+'未选择')
                          flag=false
                      }else{
                          var key=$(this).attr('name')
                          var value=$(this).children('span.select').html()
                          form[key]=value
                      }
                  })
                  if($('.item1 input').val()<=0){
                      alert('数量最少为1')
                      flag=false
                  }else{
                      form['num']=$('.item1 input').val()
                      console.log(form)
                  }
                  if(flag){
                      alert('可以加入购物车了')
                  }
              })
          })
      </script>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

 

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议