javascript - .each 不工作分开的部分-6ren

javascript - .each 不工作分开的部分

转载作者：行者123 更新时间：2023-11-29 16:06:04

24

4

我正在尝试创建一个数字字段 (.item_adults)，该字段自相乘并将值打印到 class="item_price"中。为此，我创建了其中的一些:

<div class="bookSection">
  <input class="item_adults" name="adults" type="number" data-price="10" value="1" maxlength="2" min="0">
  <p>Subtotal: $<span class="item_price">10</span></p>
</div>

$( document ).ready(function() {
    $(".bookSection").each(function() {
        $(".item_adults").change(function(){
            var price = ($(this).val());
            var ammount = ($(this).attr("data-price"));
            var total = (price) * ammount;
            $(".item_price").html(total);
        });
    });
});

<script src="https://code.jquery.com/jquery-2.2.4.js"></script>

<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>

<div class="bookSection">
  <input class="item_adults" name="adults" type="number" data-price="10" value="1" maxlength="2" min="0">
  <p>Subtotal: $<span class="item_price">10</span></p>
</div>
  
<div class="bookSection">
  <input class="item_adults" name="adults" type="number" data-price="15" value="1" maxlength="2" min="0">
  <p>Subtotal: $<span class="item_price">15</span></p>
</div>

</body>
</html>

我正在使用:

$(".bookSection").each(function() {

尝试将其分成多个部分以独立修改其自己的 .item_price，但现在一个部分正在影响其他部分。

希望解释清楚，谢谢!

最佳答案

使用 find() 在每个部分中查找实例

$(".bookSection").each(function() {
    var $item_price = $(this).find(".item_price")
    $(this).find(".item_adults").change(function(){
        var price = ($(this).val());
        var ammount = ($(this).attr("data-price"));
        var total = (price) * ammount;
        $item_price.html(total);
    });
});

也可以在不需要 each 的情况下简化它:

$(".item_adults").change(function(){
        var price = ($(this).val());
        var ammount = ($(this).attr("data-price"));
        var total = (price) * ammount;
        $(this).closest(".bookSection").find(".item_price").html(total);
});

关于javascript - .each 不工作分开的部分，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41983337/

24

4

0

文章推荐： javascript - 如何在 jasmine javascript 中编写 if 条件语句？

文章推荐： php - 如何在 Laravel 中自定义对象集合

文章推荐： php - 关于php和mysql

文章推荐： javascript - 拼接返回的对象具有未定义的属性。为什么？

typescript - A 部分部分 io-ts
我在使用 io-ts 时遇到一些问题。我发现它确实缺乏文档，我取得的大部分进展都是通过 GitHub issues 取得的。不，我不明白 HKT，所以没有帮助。基本上，我在其他地方创建一个类型，ty
java - 匹配完整文件正则表达式中的 A 部分，但不匹配 B 部分
我必须创建一个正则表达式来搜索整个文件，以找到与 Java XML 解析器的第一部分(但不是第二部分)的匹配项。这将用于防止某些 XXE 攻击。不幸的是，它确实必须是单个正则表达式，并且它确实需要搜索
c# - 部分/部分中的 asp.net mvs 部分？
我有一些简单的 Shared/_Header.cshtml 文件中的内容。 My Shared/_Layout.cshtml 通过调用插入该代码 @Html.Partial("_Header") 目前
java - Selenium 只执行循环的 if != null 部分，不运行循环的 "else if null "部分
我有一个 if-else 语句，其中: 条件 1:ID 匹配并且自动填充某些字段。然后 if 语句只填充其余字段条件 2:ID 不匹配，所有字段均为空白。 ELSE 语句将它们全部填充当我使条件
javascript - 无法在 JSFIDDLE 中使用滚动魔法(第 1 部分，共 2 部分)
我正在开发一个单页滚动网站。我正在尝试实现 ScrollMagic 并固定第一部分，以便网站的其余部分滚动到固定部分的顶部。我尝试创建一个 jsfiddle 来显示问题，但我似乎无法让 jsfiddl
javascript - 既然有

首页

博学

6Ren·AI

商城

javascript - .each 不工作分开的部分