使用此選擇父類中的類

當有人單擊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

使用此選擇父類中的類

回答

相關問題