使用此选择父类中的类

当有人单击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); 
    }); 
});

来源

2016-05-19 Aman Jolly

在第一个电话你使用上一个和你没有在第二，作为一个侧面说明，你应该保存'在一个变量.currentMass'元素。 – jcubic

你已经在做了，而读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>

来源

2016-05-19 08:47:43

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

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

来源

2016-05-19 08:48:16 Jai

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

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

它基本上是一种MVC方法。不知道你是否已经在使用任何MVC框架。但在香草的JavaScript，你应该利用以下要素：

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

来源

2016-05-19 08:57:30

您也可以使用siblings。

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

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

来源

2016-05-19 09:34:31

使用此选择父类中的类

回答

相关问题