Question

我正在使用Django和AjaxForm提交一个表单，该表单将一个项目添加到用户＆＃34;购物车＆＃34;。我在页面上列出了多个项目，每个项目都有自己的＆＃34;添加到购物车＆＃34;按钮。点击特定的＆＃34;添加到购物车＆＃34;按钮，我使用Ajax将项目添加到用户＆＃34;购物车＆＃34;并将其显示在他们的购物车中＃34;在屏幕的顶部。用户还可以通过单击购物车中的给定项目从购物车中删除商品。

我现在想改变＆＃34;添加到购物车的外观＆＃34;按钮一旦被点击，但我无法识别被点击的特定按钮（而不是所有的按钮添加到购物车按钮）。我怎样才能确定添加到购物车的哪个＆＃39;单击按钮。我添加了一个＆＃39; id＆＃39;字段到我的HTML按钮，并一直试图使用它，但一直不成功.... ??

我尝试了许多不同的东西，但要么他们不工作，要么我把他们放在错误的位置。例如，我尝试过：

$('.add-to-cart').on('click',function(){
    var id = $(this).attr("id");
    console.log("ID: ");
    console.log(id);
});

还有：

var addButtonID;
    $(this).find('input[type=submit]').click(function() {
        addButtonId = this.id;
        console.log("ID: ");
        console.log(addButtonId)
    )};

关于如何找到点击的特定按钮的任何想法，以便我可以更新按钮的外观???

我的HTML：

{% for item in item_list %}             
    <form class="add-to-cart" action="/item/add/{{ item.id }}/" method="post" enctype="application/x-www-form-urlencoded">
    <ul>
        <li style="display: block"><button class="addItemButton2" type="submit" id="{{ item.id }}">Add to Cart</button></li>
    </ul>
    </form>
{% endfor %}

我的javascript：

function remove_form_errors() {
    $('.errorlist').remove();
}
function show_hide_cart(){
    var cart = $('#cart');
    var message = $('#message');
    if (cart.find('li').length >= 1){
        cart.show();
        continueButton.show();
        message.hide();
    }
    else {
        cart.hide();
        continueButton.hide();
        message.show();
    }
}

function process_form_errors(json, form)
{
    remove_form_errors();

    var prefix = form.data('prefix'),
    errors = json.errors;
    if (errors.__all__ !== undefined) {
        form.append(errors.__all__);
    }
    prefix === undefined ? prefix = '' : prefix += '-';
    for (field in errors)
    {
        $('#id_' + prefix + field).after(errors[field])
        .parents('.control-group:first').addClass('error');
    }
}
function assign_remove_from_cart() {
    var cart = $('#cart');
    $('.remove-from-cart').on('click', function(e) {
        e.preventDefault();
        $.get(this.href, function(json) {
            remove_form_errors();
            cart.find('a[href$="' + json.slug + '/"]').parent('li').remove();
            show_hide_cart();
        });
    });
}
(function($){
    $(function() {
        var cart = $('#cart'),
            message = $('#message');
            continueButton = $('#continueButton');  

        assign_remove_from_cart();
        // ajax-enable the "add to cart" form
        $('.add-to-cart').ajaxForm({
            dataType: 'json',
            url: this.action,
            success: function(json, status, xhr, form) {
                if (json.errors !== undefined) {
                    // display error message(s)
                    process_form_errors(json, form);
                }
                else if(json.id == -1){
                    // duplicate, do nothing
                    console.log("json.id:%s:json.slug:%s", json.id, json.slug)
                }
                else {
                    // Hide any previously displayed errors
                    remove_form_errors();
                    // compile cart item template and append to cart
                    var t = _.template($('#cart-item-template').html());
                    $('#cart').append(t(json));
                    show_hide_cart();
                    assign_remove_from_cart();
                }
            }
        });
    });
})(jQuery);

Answer 1

将按钮类型更改为“按钮”，然后添加onClick =“addToCartFunction（this）;”

然后在addToCarFunction中，this.id将是您添加的项目ID？或者您可以使用数据属性为要获取的函数添加更多项目详细信息。

如果您需要向服务器发送信息以缓存购物车，请使用$ .ajax jQuery调用服务器。

Answer 2

根据您的评论，您应该能够将您的onClick函数放入HTML页面末尾的脚本标记中并使其按预期运行（尽管您的javascript实际上应该都在一个单独的文件中被引用通过脚本标签）。

$( document ).ready(function(){ 
    $('.add-to-cart :submit').on('click',function(){ 
        var id = this.id; 
        console.log("ID: ",id); 
        //do something with your ID here, such as calling a method to restyle your button
        $('#' + id).css("attribute","new value");
        //or
        $('#' + id).addClass("yourClassName");
    }); 
});

在提交AjaxForm时标识特定按钮

2 个答案: