Javascript 提交AjaxForm时识别特定按钮

我使用Django和AjaxForm提交表单，将项目添加到用户的购物车中。我在页面上列出了多个项目，每个项目都有自己的“添加到购物车”按钮。单击特定的addtocart按钮后，我使用Ajax将项目添加到用户的购物车中，并将其显示在屏幕顶部的购物车中。用户还可以通过单击购物车中的给定项目从购物车中删除项目

现在，我想在单击“添加到购物车”按钮后更改其外观，但我无法仅识别单击的特定按钮，而不是所有“添加到购物车”按钮。如何识别单击了哪个“添加到购物车”按钮。我在我的html按钮中添加了一个“id”字段，并一直尝试使用该字段，但没有成功

我尝试过很多不同的方法，但要么不起作用，要么我把它们放错地方了。例如，我尝试过：

$('.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 %}

---

将按钮类型更改为“button”，然后添加onClick=addToCartFunctionthis

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

---

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

根据您的评论，您应该能够将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");
    }); 
});

---

您是否验证分配给每个按钮的ID是唯一的？是的，它是唯一的@锁定单击时将什么记录到控制台？有什么事吗？嗯，当使用“点击”时，“id”被记录为未定义。所以，这是我的第一个问题——为什么我不抓取身份证？但是，我甚至不确定我们是否会，但是“点击”代码。。？现在，为了测试日志记录，我只是把它放在html页面上的一个scrip标记中。这段代码允许我记录按钮id，但我不确定放在哪里，这样我的ajax/javascript代码的其余部分仍然可以工作？$document.readyfunction{$'。添加到购物车：提交。'click'，函数{var id=this.id；console.logID:，id；return false//停止它！}；}；太近了！id正确地记录，我的js的其余部分工作得很好，但是，尽管新类添加了一个类来更改按钮的颜色，但按钮的颜色没有改变，我可以通过使用Chrome开发工具检查按钮来看到该类已经被添加……我需要做一些自动刷新吗？不，浏览器应该使用新附加的类样式自动重新绘制元素。你确定该类的名称拼写正确，样式元素在CSS中列出正确吗？我正要发表评论：出于某种原因，更改背景颜色不起作用，我将进行调查，但我尝试添加边框，效果很好！非常感谢你！不客气可能是语法。你使用的是像background:fff这样的东西吗？我最后只是改变了里面的文本而不是颜色，这样就可以了！但是，是的，我用的是背景色：dfdf

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