jQuery 内容文本值|| 案例:购物车案例模块-增减商品数量 || 案例:购物车案例模块-修改商品小计

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">
    <title>Document</title>
    <script src="jquery.min.js"></script>
</head>

<body>
    <div>
        <span>我是内容</span>
    </div>
    <input type="text" value="请输入内容">
    <script>
        // 1. 获取设置元素内容 html()
        console.log($("div").html());
        // $("div").html("123");
        // 2. 获取设置元素文本内容 text()
        console.log($("div").text());
        $("div").text("123");

        // 3. 获取设置表单值 val()
        console.log($("input").val());
        $("input").val("123");
    </script>
</body>

</html>


案例:购物车案例模块-增减商品数量



案例:购物车案例模块-修改商品小计



 // 3. 增减商品数量模块 首先声明一个变量,当我们点击+号(increment),就让这个值++,然后赋值给文本框。
  $('.increment').click(function () {
    // 得到当前兄弟文本框的值
    var n = $(this).siblings('.itxt').val()
    n++
    $(this).siblings('.itxt').val(n)
    // 3. 计算小计模块 根据文本框的值 乘以 当前商品的价格  就是 商品的小计
    // 当前商品的价格 p
    var p = $(this).parents('.p-num').siblings('.p-price').html()
    p = p.substr(1)
    var price = (p * n).toFixed(2)
    // 小计模块
    // toFixed(2) 可以让我们保留2位小数
    $(this)
      .parents('.p-num')
      .siblings('.p-sum')
      .html('¥' + price)
    getSum()
  })
  $('.decrement').click(function () {
    // 得到当前兄弟文本框的值
    var n = $(this).siblings('.itxt').val()
    if (n == 1) {
      return false
    }
    n--
    $(this).siblings('.itxt').val(n)
    // var p = $(this).parent().parent().siblings(".p-price").html();
    // parents(".p-num") 返回指定的祖先元素
    var p = $(this).parents('.p-num').siblings('.p-price').html()
    p = p.substr(1)
    // 小计模块
    $(this)
      .parents('.p-num')
      .siblings('.p-sum')
      .html('¥' + (p * n).toFixed(2))
    getSum()
  })

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页