javascript - 使用此选择父类中的类

Question

当有人点击 addMass 类时，我想将 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>

JS:

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);
    });
});

Answer 1

你在阅读cm的时候已经在做了，找到被点击元素的前一个兄弟的后代元素

var mass = 0;

$(document).ready(function() {

  $(".currentMass").html(mass);

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

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>