jquery簡單購物車功能

admin發表於2017-04-15
jQuery

本例中的購物車功能當然不能直接實際用用，主要目的還是學習jquery的相關應用。

比如只有選中產品以後，才能夠調整商品的數量，同時也能夠實時計算放入購物車的商品總數量。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
.cfs {
  width: 30%;
}
.cfs a {
  cursor: pointer;
}
#cxsdd {
  width: 800px;
  text-align: center;
}
#cxsdd td {
  height: 35px;
}
#xianss {
  height: 40px;
  line-height: 40px;
}
#in_num, #sp_num {
  color: red;
  font-weight: bold;
  font-size: 20px;
  padding: 0 5px;
}
.lskdo {
  width: 40px;
  text-align: center;
}
</style>
</head>
<body>
<div id="xianss">您選擇了<span id="in_num">0</span>種商品，共有<span id="sp_num">0</span>個商品</div>
<table id="cxsdd" width="200" border="1" cellpadding="0" cellspacing="0">
  <tr>
    <td>店鋪序列</td>
    <td>店鋪名稱</td>
    <td>商品</td>
    <td><input id="allc" type="checkbox" />全選</td>
    <td class="cfs">數量</td>
  </tr>
  <tr>
    <td rowspan="5">螞蟻部落</td>
    <td rowspan="5">softwhy.com</td>
    <td>產品1</td>
    <td><input class="choo" type="checkbox" value="choose" />選擇</td>
    <td class="cfs">
      <a class="jian">-</a>
      <input class="lskdo" disabled="disabled" type="text" value="0" />
      <a class="jia">+</a>
    </td>
  </tr>
  <tr>
    <td>產品2</td>
    <td><input class="choo" type="checkbox" value="choose" />選擇</td>
    <td class="cfs">
      <a class="jian">-</a>
      <input class="lskdo" disabled="disabled" type="text" value="0" />
      <a class="jia">+</a>
    </td>
  </tr>
  <tr>
    <td>產品3</td>
    <td><input class="choo" type="checkbox" value="choose" />選擇</td>
    <td class="cfs">
      <a class="jian">-</a>
      <input class="lskdo" disabled="disabled" type="text" value="0" />
      <a class="jia">+</a>
    </td>
  </tr>
  <tr>
    <td>產品4</td>
    <td><input class="choo" type="checkbox" value="choose" />選擇</td>
    <td class="cfs">
      <a class="jian">-</a>
      <input class="lskdo" disabled="disabled" type="text" value="0" />
      <a class="jia">+</a>
    </td>
  </tr>
  <tr>
    <td>產品5</td>
    <td><input class="choo" type="checkbox" value="choose" />選擇</td>
    <td class="cfs">
      <a class="jian">-</a>
      <input class="lskdo" disabled="disabled" type="text" value="0" />
      <a class="jia">+</a>
    </td>
  </tr>
</table>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
$("#allc").change(function() {
  var innum = $(".choo").length;
  if ($(this).prop("checked")) {
    $(".choo").prop("checked", true);
    $("#in_num").text(innum);
    $(".lskdo").val(1);
    $("#sp_num").text(innum);
    $(".lskdo").prop("disabled", false);
  } else {
    $(".choo").prop("checked", false);
    $("#in_num").text(0);
    $(".lskdo").val(0);
    $("#sp_num").text(0);
    $(".lskdo").prop("disabled", true);
  }
})
$(".choo").change(function() {
  var lskd = $(".choo:checked").length;
  $("#in_num").text(lskd);
  var lsoe = $(this).parent().parent().find(".lskdo");
  if ($(this).prop("checked")) {
    lsoe.prop("disabled", false);
    lsoe.val(1);
    $("#sp_num").text(parseInt($("#sp_num").text()) + parseInt(lsoe.val()));
  } else {
    lsoe.prop("disabled", true);
    $("#sp_num").text(parseInt($("#sp_num").text()) - parseInt(lsoe.val()));
    lsoe.val(0);
  }
})
 
$(".jian").click(function() {
  var lskdpd = $(this).parent().parent().find(".choo");
  var lsoek = $(this).parent().find(".lskdo");
  if (lskdpd.prop("checked") && lsoek.val() > 1) {
    var lskoe = parseInt(lsoek.val());
    var eiow = parseInt($("#sp_num").text());
    lsoek.val(lskoe - 1);
    $("#sp_num").text(eiow - 1);
  } else {}
})
$(".jia").click(function(iiii) {
    var lskdpd = $(this).parent().parent().find(".choo");
    var lsoek = $(this).parent().find(".lskdo");
    if (lskdpd.prop("checked")) {
      var lskoe = parseInt(lsoek.val());
      var eiow = parseInt($("#sp_num").text());
      lsoek.val(lskoe + 1);
      $("#sp_num").text(eiow + 1);
    } else {}
  })
  //        })
$(".lskdo").on('input propertychange', function() {
  var deox = $(this).val();
  if (isNaN(deox)) {
    alert("您好,請輸入您想購買的數量!");
    $(this).val(1);
  }
  var loel = 0;
  for (i = 0; i < $(".lskdo").length; i++) {
    loel = parseInt(loel) + parseInt($(".lskdo").eq(i).val());
  }
  $("#sp_num").text(loel);
})
</script>
</body>
</html>

相關文章