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时已经这样做了，找到被点击元素的前一个兄弟的后代元素

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

您可以找到目标元素.prev()，因为目标元素.currentMass是点击按钮的兄弟姐妹的孩子：

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

Answer 3

我想提出一个不同的方法。

不是直接在GUI元素上运行业务登录，而是尝试使用JSON结构创建购物车状态，并让GUI根据JSON结构显示购物车状态。

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

代表购物车的变量
通过一组方法实现业务逻辑的购物车管理器对象（例如addMass，removeMass，addItem，removeItem）。
一组侦听GUI事件的处理程序，调用相应的购物车管理器方法并最终刷新GUI内容。

Answer 4

您也可以使用siblings。

＆＃13;

$(document).ready(function() {
  $(".currentMass").html(0);
  $(".addMass").click(function() {

    var cm = $(this).siblings(".addToCartButton").find(".currentMass").html();
    var incr = $(this).siblings(".addToCartButton").attr("data-rate");

    $(this).siblings(".addToCartButton").find(".currentMass").html(parseInt(cm) + parseInt(incr))
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
First : <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>
<br>
Second : <div class="addToCart">
  <button class="minusMass twitchButton">-</button>
  <button class="addToCartButton" data-rate="5">Add <span class="currentMass"></span> Kg</button>
  <button class="addMass twitchButton">+</button>
  <div class="clear"></div>
</div>

＆＃13;

使用此选择父类中的类

4 个答案: