qq_37727187 2022-11-18 13:26 采纳率: 89.8%
浏览 9
已结题

获取div包裹里面的元素


<div class="clear mg-t-10">
                            <div class="wy-pro-pri fl">¥<em class="num font-15">10.00</em></div>
                            <div class="pro-amount fr">
                                <div class="Spinner"><a class="DisDe" href="javascript:;"><i>-</i></a><input disabled="disabled" class="Amount" value="1" autocomplete="off" maxlength="3"><a class="Increase" href="javascript:;"><i>+</i></a></div>
                            </div>
                        </div>


<div class="clear mg-t-10">
                            <div class="wy-pro-pri fl">¥<em class="num font-15">20.00</em></div>
                            <div class="pro-amount fr">
                                <div class="Spinner"><a class="DisDe" href="javascript:;"><i>-</i></a><input disabled="disabled" class="Amount" value="1" autocomplete="off" maxlength="3"><a class="Increase" href="javascript:;"><i>+</i></a></div>
                            </div>
                        </div>


<div class="clear mg-t-10">
                            <div class="wy-pro-pri fl">¥<em class="num font-15">30.00</em></div>
                            <div class="pro-amount fr">
                                <div class="Spinner"><a class="DisDe" href="javascript:;"><i>-</i></a><input disabled="disabled" class="Amount" value="1" autocomplete="off" maxlength="3"><a class="Increase" href="javascript:;"><i>+</i></a></div>
                            </div>
                        </div>

多个这种div包裹下，如何通过点击+，- 号获取对应的input值和em标签里的单价

  • 写回答

4条回答 默认 最新

  • 上官熊猫 2022-11-18 14:55
    关注
    <!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,chrome=1" />
    <meta name="renderer" content="webkit" />
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <link rel="icon" href="" />
    <title>html示例</title>
  </head>
  <body>
    <div class="list"></div>
    <script>
      let listDom = document.querySelector(".list");
      //数据
      let listData = [
        { id: 0, num: 10.0 },
        { id: 1, num: 20.0 },
        { id: 2, num: 30.0 },
      ];
      let str = "";

      //点击减  e:当前点击的元素，data：传递的其他数据
      function handleMinus(e, data) {
        // console.log(e, data);
        console.log("当前em里的值就是：", data);
        console.log("点击减时当前的input值是", e.nextElementSibling.value);
        //如果需要修改当前的input值
        // e.nextElementSibling.value=9527
      }
      //点击加
      function handleAdd(e, data) {
        console.log("当前em里的值就是：", data);
        console.log("点击加时当前的input值是", e.previousElementSibling.value);
      }
      //通过遍历动态添加绑定数据
      listData.forEach((item, index) => {
        str += `
           <div class="clear mg-t-10">
                <div class="wy-pro-pri fl">¥<em class="num font-15">${item.num}</em></div>
                <div class="pro-amount fr">
                <div class="Spinner">
                    <a class="DisDe" href="javascript:;" onclick='handleMinus(this,${item.num})'><i>-</i></a>
                    <input disabled="disabled"
                    class="Amount"
                    value="1"
                    autocomplete="off"
                    maxlength="3"
                    /><a class="Increase" href="javascript:;" onclick='handleAdd(this,${item.num})' ><i>+</i></a>
                </div>
                </div>
            </div>
           `;
      });
      listDom.innerHTML = str;
    </script>
  </body>
</html>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录
查看更多回答(3条)

报告相同问题？

问题事件

  • 系统已结题 11月29日
  • 已采纳回答 11月21日
  • 修改了问题 11月18日
  • 创建了问题 11月18日

悬赏问题

  • ¥20 西门子S7-Graph,S7-300，梯形图
  • ¥50 用易语言http 访问不了网页
  • ¥50 safari浏览器fetch提交数据后数据丢失问题
  • ¥15 matlab不知道怎么改，求解答！！
  • ¥15 永磁直线电机的电流环pi调不出来
  • ¥15 用stata实现聚类的代码
  • ¥15 请问paddlehub能支持移动端开发吗？在Android studio上该如何部署？
  • ¥20 docker里部署springboot项目，访问不到扬声器
  • ¥15 netty整合springboot之后自动重连失效
  • ¥15 悬赏！微信开发者工具报错，求帮改