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

像Jon说的那样......传递你需要的属性或对象。

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

如何只从一个输入字段添加？

2 个答案: