我正在使用Django和AjaxForm提交一个表单,该表单将一个项目添加到用户"购物车"。我在页面上列出了多个项目,每个项目都有自己的"添加到购物车"按钮。点击特定的"添加到购物车"按钮,我使用Ajax将项目添加到用户"购物车"并将其显示在他们的购物车中#34;在屏幕的顶部。用户还可以通过单击购物车中的给定项目从购物车中删除商品。
我现在想改变"添加到购物车的外观"按钮一旦被点击,但我无法识别被点击的特定按钮(而不是所有的按钮添加到购物车按钮)。我怎样才能确定添加到购物车的哪个'单击按钮。我添加了一个' id'字段到我的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);
答案 0 :(得分:0)
将按钮类型更改为“按钮”,然后添加onClick =“addToCartFunction(this);”
然后在addToCarFunction中,this.id将是您添加的项目ID?或者您可以使用数据属性为要获取的函数添加更多项目详细信息。
如果您需要向服务器发送信息以缓存购物车,请使用$ .ajax jQuery调用服务器。
答案 1 :(得分:0)
根据您的评论,您应该能够将您的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");
});
});