Question

我正在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 %}

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 %}

Answer 1

只需定位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 %}

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

1 个答案: