Javascript 使用此选项在父类内选择类

当有人单击

addMass

class时，我想将

data rate

添加到

currentMass

类中。可以有许多

addToCart

类，因此我需要对此时单击的类进行更改

请参阅下面的代码

HTML:

<div class="addToCart">
    <button class="minusMass twitchButton">-</button>
    <button class="addToCartButton" data-rate="1">Add <span class="currentMass"></span> Kg</button>
    <button class="addMass twitchButton">+</button>
    <div class="clear"></div>   
</div>

var mass = 0;   

$(document).ready(function() {
    $(".currentMass").html(mass);
    $(".addToCart").on("click", ".addMass", function() {
        var cm = Number($(this).prev("button.addToCartButton").find(".currentMass").text());
        var increment_rate = Number($(this).find(".currentMass").attr("data-rate"));
        cm = cm + increment_rate;
        $(".currentMass").html(cm);
    });
});

---

您在读取

cm

时已经在执行此操作，请查找所单击元素的上一个同级的子元素

var质量=0；
$（文档）.ready（函数（）{
$（“.currentMass”）.html（mass）；
$（.addToCart”）。在（“单击”，“.addMass”，函数（）上{
var$mass=$（this.prev（“button.addToCartButton”）.find（“.currentMass”）；
var增量_比率=$（this）.prev（“.addToCartButton”）.data（“比率”）；
$mass.html（+$mass.text（）+增量率）；
});
});

-
加公斤
+
您可以找到目标元素
.prev（）
作为目标元素
。currentMass
是单击按钮的同级元素的子元素：

$(this).prev('button').find(".currentMass").html(cm);

我想提出一种不同的方法

不要直接在GUI元素上操作业务登录，而是尝试使用JSON结构创建购物车状态，并让GUI基于JSON结构显示购物车状态

它基本上是一种MVC方法。不确定您是否已经在使用任何MVC框架。但在香草JavaScript中，您应该利用以下元素：


表示购物车的变量
cart manager对象，通过一组方法（例如addMass、removeMass、addItem、removeItem）实现业务逻辑
一组处理程序，用于侦听GUI事件、调用相应的cart manager方法并最终刷新GUI内容
您也可以使用同级


$（文档）.ready（函数（）{
$（“.currentMass”）.html（0）；
$（“.addMass”）。单击（函数（）{
var cm=$（this.sides（“.addToCartButton”）.find（“.currentMass”）.html（）；
var incr=$（this）.sibbines（“.addToCartButton”）.attr（“数据速率”）；
$（this.sides（“.addToCartButton”）.find（“.currentMass”）.html（parseInt（cm）+parseInt（incr））
});
});

第一：
-
加公斤
+


第二：
-
加公斤
+
在第一次调用中使用prev，而在第二次调用中不使用，作为旁注，您应该将
.currentMass
元素保存在变量中。