jquery无序添加商品 ——最新成果

这个功能的主要是针对在商品不定的情况下、对商品的添加、

代码如下：

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title></title>
  <script type="text/javascript" src="jquery.js"></script>
  <style type="text/css">
   <!--
    *{margin:0;padding:0;list-style-type:none;}
    html,body{width:100%;height:100%;}
    .M{width:500px;height:100px;margin:200px auto 0px auto;border:1px solid #ccc;}
    .T{height:30px;line-height:30px;text-align:center;border-bottom:1px solid #ccc;}
    ul li{height:22px;line-height:22px;border:1px solid #ccc;margin:10px;float:left;}
    ul li .L{width:25px;height:22px;float:left;text-align:center;cursor:pointer;}
    ul li .R{width:25px;height:22px;float:left;text-align:center;cursor:pointer;}
    ul li .C{padding:0px 5px;height:22px;float:left;}
   -->
  </style>
  <script type="text/javascript">
   $(document).ready(function() {
    var len = $('.C').length;
    var input = document.querySelector('.T');
    var m =0;
    $('.L').click(function(){
     var Cval = $(this).next().html();
     var yname = $("span[name="+Cval+"]").attr("name");
     var yl = $("span[name="+Cval+"]").length;
     var yv = $("span[name="+Cval+"]>span").html();
      
      if(yname != Cval){
       m = m+ 1;
       $(".T").append("<span name="+Cval+">"+Cval+"<span>"+m+"</span>"+"</span>");
       m = 0;
      }else{
       var xx =Number(yv)+1;
       $("span[name="+Cval+"]>span").replaceWith("<span>"+xx+"</span>");
      }
    });
    $('.R').click(function(){
     var Cval = $(this).prev().html();
     var yname = $("span[name="+Cval+"]").attr("name");
     var yl = $("span[name="+Cval+"]").length;
     var yv = $("span[name="+Cval+"]>span").html();
     if(yv !=0){
      var xx =Number(yv)-1;
      $("span[name="+Cval+"]>span").replaceWith("<span>"+xx+"</span>");
     }else{
      $("span[name="+Cval+"]").remove();
     }
    });
   }); 
  </script>
 </head>
 <body>
  <div class="M">
   <div class="T"></div>
   <ul>
    <li>
     <div class="L">+</div>
     <div class="C">课时</div>
     <div class="R">-</div>
    </li>
    <li>
     <div class="L">+</div>
     <div class="C">道服</div>
     <div class="R">-</div>
    </li>
    <li>
     <div class="L">+</div>
     <div class="C">日志</div>
     <div class="R">-</div>
    </li>
    <li>
     <div class="L">+</div>
     <div class="C">护肩</div>
     <div class="R">-</div>
    </li>
   </ul>
  </div>
 </body>
</html>

 

本人对JQuery 也算新手、请高手们别吐槽、有不足之处请指教、谢谢

posted @ 2014-06-12 22:14  Lee_CQ  阅读(190)  评论(0)    收藏  举报