親クラス内のクラスを選択するには

Question

addMassクラスをクリックするとcurrentMassクラスにdata-rateを追加します。多くの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>

私は別のアプローチを提案したい

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

Answer 2

あなたがターゲット要素.currentMassとして.prev()とターゲット要素を見つけることができますがクリックされたボタンの兄弟の子です。

GUI要素でビジネスログインを直接操作するのではなく、JSON構造を使用してカートステータスを作成し、GUIにJSON構造に基づくカートステータスを表示させてください。

これは基本的にMVCアプローチです。 MVCフレームワークを既に使用しているかどうかは不明です。しかし、バニラであなたは以下の要素に活用すべきはJavaScript：

• カートを表す変数を
• メソッドのセットを介してビジネスロジックを実装カートマネージャオブジェクト（例えばaddMass、removeMass、のaddItem、removeItem ）。
• GUIイベントをリッスンし、対応するカートマネージャメソッドを呼び出し、最終的にGUIコンテンツを更新するハンドラのセット。

Answer 3

：

Answer 4

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>