如何只從一個輸入字段添加？

Question

我希望能夠添加您點擊的文章而不是每個文章。我可以用什麼來代替.each這個工作？

這些功能：

計算合計價格：

var quantity, price, sum = 0; 
function calculatePrice() { 
    //loop through product "blocks" 
    $('.articel').each(function() { 
     price = $(this).children('.price').val(); 
     quantity = $(this).children('.quantity').val(); 
     //Add price to sum if number 
     if (!isNaN(price) && !isNaN(quantity)) { 
      sum += price * quantity;         
     } 
    }); 
    //Update Price 
    $('#totalprice').html('<h4>Total price: ' + sum + '$</h4>'); 
} 

添加到購物車：

$(document).ready(function(){                 
    $(".articel input[type='button']").click(function(){ //sätter klickfunktion på klassen artikels knapp 
     var price = $(this).siblings('.price').attr("value"); 
     var quantity = $(this).siblings('.quantity').attr("value"); 
     if(quantity % 1 != 0) 
     { 
      alert("You must add a whole number"); 
     } 
     else if(quantity <= 0) 
     { 
      alert("You must att a whole number"); 
     } 
     else 
     { 
      var name = $(this).siblings("input[name='prodname']").attr("value"); 
      var ul = document.getElementById("buylist"); 
      var totalprice = quantity * price; 
      var prod = name + " x " + quantity + "= " + totalprice + "$"; 


      var el = document.createElement("li"); //skapar ett nytt element 
      el.innerHTML = prod; //variabeln prod läggs IN i nya elementet 
      ul.appendChild(el); //sätt IN el i ul 
      calculatePrice(); 
     } 
    }); 
}); 

這是我的表格：

<div id="moviescat_view" style="display:none"> 
    <h2>Movies</h2> 
    <br><button onclick="backButton(moviescat_view);" class="btn">Go back</button><br> 
    <img border="0" id="img/hoverover.jpg" src="img/1_1.jpg" alt="The walking dead" onmouseover="mouseOverImage(this)" onmouseout="mouseOutImage(this)" onClick="addtoCart()"> 
    </form> 
    <br><button onclick="showInfo(set1);" class="btn">Show info</button><br> 
    <h4>The walking dead</h4> 
    <p>Price : 30$</p> 
    <div id="set1" style="display:none"> 
     <p>A serie about zombies</p> 
    </div> 
    <form class="articel"> 
    Quantity: <input type="number" style="width:30px;" class="quantity"><br> 
    Add to cart: <input type="button" class="btn"> 
    <input type="hidden" value="30" name="price" class="price"> 
    <input type="hidden" value="The walking dead" name="prodname"> 
    </form> 
</div> 

Answer 1

你應該通過屬性

calculatePrice(); 

即價格和數量，然後執行函數中的完全一樣：

function calculatePrice(price, quantity) { 
     //Add price to sum if number 
     if (!isNaN(price) && !isNaN(quantity)) { 
      sum += price * quantity; 
     } 
     $('#totalprice').html('<h4>Total price: ' + sum + '$</h4>'); 
    } 

Answer 2

像喬恩說...傳遞的屬性或對象你需要的。

$(document).ready(function(){                 
    $(".articel input[type='button']").click(function(){ 
     //... 
     calculatePrice($(this)); //$(this) would be the clicked DOM element 
    }); 
}); 
function calculatePrice(element) { 

     price = element.children('.price').val(); 
     quantity = element.children('.quantity').val(); 
     //Add price to sum if number 
     if (!isNaN(price) && !isNaN(quantity)) { 
      sum += price * quantity;         
     } 
    //Update Price 
    $('#totalprice').html('<h4>Total price: ' + sum + '$</h4>'); 
}