单击按钮加号或减号时更新价格

时间:2014-07-31 12:58:19

标签: jquery html css

这里是HTML代码:(抱歉,如果div没有正确显示而且没有形成为ususal)

HTML

<form action="http://mysite.local/standard_library/view_cart" method="post" accept-charset="utf-8">
    <div class="produse-wrapper">
        <div class="header-cos">
            <div class="nr_item">
                Nr.
            </div>
            <div class="product-wrapper">
                Produs cumparat
            </div>
            <div class="pret-unitar">
                Pret unitar
            </div>
            <div class="item-cantitate">
                Cantitate
            </div>
            <div class="pret-total">
                Pret total
            </div>
            <div class="remove-item">
            </div>
        </div>
        <div class="order-item">
            <input type="hidden" name="items[1][row_id]" value="9fc3d7152ba9336a670e36d0ed79bc43">
            <div class="nr_item">
                1                              
            </div>
            <div class="product-wrapper">
                <div class="img-wrapper">
                    <img src="/public/thumb-98-98/2009-01-16_product.jpg">
                </div>
                <a href="http://mysite.local/category/product_133.html">
                    <div class="item-name">
                        Izolatie seminee - placi speciale 3cm                                          
                    </div>
                </a>
            </div>
            <div class="pret-unitar">
                65.00Lei                               
            </div>
            <div class="item-cantitate">
                <div class="sp-quantity">
                    <a class="ddd" href="#" data-multi="-1">
                        <div class="sp-minus fff">-</div>
                    </a>
                    <div class="sp-input">
                        <input type="text" class="quntity-input" value="1">
                    </div>
                    <a class="ddd" href="#" data-multi="1">
                        <div class="sp-plus fff">+</div>
                    </a>
                </div>
            </div>
            <div class="pret-total">
                130.00Lei                              
            </div>
            <div class="remove-item">
                <a href="/delete-item/9fc3d7152ba9336a670e36d0ed79bc43" class="remove-btn">Sterge </a>
            </div>
        </div>
        <div class="footer-cos">
            <div class="nr_item">
            </div>
            <div class="product-wrapper">
                <div class="item-name">
                    Total
                </div>
            </div>
            <div class="pret-unitar">
            </div>
            <div class="item-cantitate">
            </div>
            <div class="pret-total">
                130.00Lei                          
            </div>
            <div class="remove-item">
            </div>
        </div>
    </div>
    <div class="cart-action">
        <a href="http://mysite.local/produse.html" class="cos-btn back-comanda">Continua cumparaturile</a>
        <input type="submit" name="checkout" value="Finalizeaza comanda" class="cos-btn finalizare-comanda">
    </div>
</form>

到目前为止我用jquery尝试了什么:

JQUERY

$(".ddd").on("click", function () {
    var $button = $(this);
    var $input = $button.closest('.sp-quantity').find("input.quntity-input");

    $input.val(function(i, value) {
        return +value + (1 * +$button.data('multi'));
        var unitar = parseInt($('.pret-unitar').val());
        var quantity = parseInt($('cantitate-input]').val());
        var total = parseInt(unitar * quantity);
    });
});

我希望在点击加号或减号按钮时更新价格。当我在输入中引入值时,我也希望更新价格。 像这样http://jsfiddle.net/hReB3/2/

我是一个jQuery的菜鸟和搜索主题,但它无法帮助我。 所以请怜悯并帮助我! 提前谢谢!

1 个答案:

答案 0 :(得分:0)

$("#plus").on("click", function() {
   var defaultValue = parseInt($("#price").text());
   var addedValue = parseInt($("#qty").val());
    if(isNumber(addedValue) && addedValue >0) {
        $("#price").html(
            defaultValue + addedValue
        );
    }
})

这是我的解决方案,请参阅演示http://jsfiddle.net/hReB3/20/

我构建为两个按钮绑定它们进行查询,并从#price中获取数字,然后将它们添加起来,并替换原始价格