Javascript 使用Ajax更改单击按钮的状态

我正在Django项目中构建一个页面，该页面有多个注释，每个注释都可以通过文本旁边的按钮进行喜欢/不喜欢。因此，页面有多个相似/不相似按钮

加载页面时，按钮显示良好，我可以使用Ajax将数据发送到Django并更新工作正常的数据库，还可以将数据返回到Ajax成功函数

我不能解决的是-我如何更新被点击的实际按钮的状态。我能够按照下面的代码一起更新页面上所有按钮的状态（我知道这是毫无意义的！），但看不到我如何引用单击的按钮。我试着传递然后返回我可以在警报中显示的按钮id，但不确定这是我应该使用的还是我从这里开始的方向

HTML模板

{% for comments in comments_page %}
    <p>
        <b>{{ comments.created_at }} ({{ comments.user_type }})</b>
        {% if comments.comment_liked is False %}
            <button class="comment btn btn-primary btn-xs"
                    id={{ forloop.counter0 }}
                    data-surveyid="{{ comments.id }}"
                    data-commentliked="True"
                    type="button">
                <span class="glyphicon glyphicon-star-empty"></span>
            </button>
        {% else %}
            <button class="comment btn btn-success btn-xs"
                    id={{ forloop.counter0 }}
                    data-surveyid="{{ comments.id }}"
                    data-commentliked="False"
                    type="button">
            <span class="glyphicon glyphicon-star"></span>
            </button>
        {% endif %}
    </p>
    <p>{{ comments.comments }}</p>
    <br>


{% endfor %}

{%用于注释中的注释\u页面%}

{{comments.created_at}}（{{comments.user_type}}）
{%if comments.comment\u liked为False%}
{%else%}
{%endif%}

{{comments.comments}}



{%endfor%}

Javascript/Ajax

{% block javascript %}

    <script type="text/javascript">
        $(function() {
           $('.comment').click(function() {

               var surveyid, commentliked, buttonid;
               surveyid = $(this).attr('data-surveyid');
               commentliked = $(this).attr('data-commentliked');
               buttonid = $(this).attr('id');

             $.ajax({
                 url: '/evaluations/validate_username/',
                 data: {
                    'surveyid': surveyid,
                     'commentliked': commentliked,
                     'buttonid': buttonid
                    },
                 dataType: 'json',
                 type: 'get',

                 success: function (data) {
                    alert(data.buttonid);
                    $(".comment").removeClass('comment btn btn-primary btn-xs').addClass('comment btn btn-success btn-xs');
                 }

             });

           });
        });
    </script>
{% endblock %}

{%block javascript%}
$（函数（）{
$（'.comment'）。单击（函数（）{
var surveyid、Commentlike、buttonid；
surveyid=$（this.attr（'data-surveyid'）；
commentliked=$（this.attr（'data-commentliked'）；
buttonid=$（this.attr（'id'）；
$.ajax({
url:“/evaluations/validate_username/”，
数据：{
“surveyid”：surveyid，
“commentliked”：commentliked，
“buttonid”：buttonid
},
数据类型：“json”，
键入：“get”，
成功：功能（数据）{
警报（data.buttonid）；
$（“.comment”）.removeClass（'comment btn btn primary btn xs'）.addClass（'comment btn btn success btn xs'）；
}
});
});
});
{%endblock%}

只需在

success

功能中点击按钮即可：

{% block javascript %}
    <script type="text/javascript">
        $(function() {
           $('.comment').click(function() {

               // the button instance that was clicked
               var clickedBtn = $(this);

               var surveyid, commentliked, buttonid;
               // also, you can use data-* to get the data attributes
               // surveyid = clickedBtn.attr('data-surveyid');
               // commentliked = clickedBtn.attr('data-commentliked');
               surveyid = clickedBtn.data('surveyid');
               commentliked = clickedBtn.data('commentliked');
               buttonid = clickedBtn.attr('id');

             $.ajax({
                 url: '/evaluations/validate_username/',
                 data: {
                     'surveyid': surveyid,
                     'commentliked': commentliked,
                     'buttonid': buttonid
                    },
                 dataType: 'json',
                 type: 'get',

                 success: function (data) {
                    alert(data.buttonid);
                    clickedBtn.removeClass('comment btn btn-primary btn-xs')
                    .addClass('comment btn btn-success btn-xs');
                 }
             });
           });
        });
    </script>
{% endblock %}

{%block javascript%}
$（函数（）{
$（'.comment'）。单击（函数（）{
//单击的按钮实例
var clickedBtn=$（此项）；
var surveyid、Commentlike、buttonid；
//此外，还可以使用data-*获取数据属性
//surveyid=点击的btn.attr（'data-surveyid'）；
//commentliked=clickedBtn.attr（'data-commentliked'）；
surveyid=点击的BTN.data（“surveyid”）；
commentliked=clickedBtn.data（'commentliked'）；
buttonid=clickedBtn.attr（'id'）；
$.ajax({
url:“/evaluations/validate_username/”，
数据：{
“surveyid”：surveyid，
“commentliked”：commentliked，
“buttonid”：buttonid
},
数据类型：“json”，
键入：“get”，
成功：功能（数据）{
警报（data.buttonid）；
clickedBtn.removeClass（'注释btn btn主btn xs'）
.addClass（'comment btn btn success btn xs'）；
}
});
});
});
{%endblock%}