Question

我正在构建一个简单的按钮时遇到问题。我已经完成了所有内容，因为我已经阅读了不同的教程但是当我点击Like按钮时，它没有做任何事情。看：

models.py

class Comentario (models.Model):
    titulo = models.CharField(max_length=50)
    texto = models.CharField(max_length=200)
    autor = models.ForeignKey (Perfil, null=True, blank=True, on_delete=models.CASCADE)
    likes = models.IntegerField(default=0)

views.py

def like (request):

    com_id = None

    if request.method == 'GET':
        com_id = request.GET.get('comentario_id')

    likes = 0
    if com_id:
        com = Comentario.objects.get(id=int(com_id))
        if com:
            likes = com.likes + 1
            com.likes =  likes
            com.save()
    return HttpResponse(likes)

urls.py

urlpatterns = [
    url(r'^like/$', login_required(views.like), name='like'),
]

html的

{% extends 'base/base.html' %}
{% for comentario in objects %}
...
{% if user.is_authenticated %}
            <button id="likes" data-comid="{{comentario.id}}" class="btn btn-warning btn-sm " type="button">
            Like|<strong id="like_count">{{ comentario.likes }}</strong> 
            </button>

{% endif %}
{% endfor %}

JS / ajax.js

$('#likes').click(function(){
    var comid;
    comid = $(this).attr("data-comid");
$.get('/home/like/', {comentario_id: comid}, function(data){
          $('#like_count').html(data);
       $('#likes').hide();
    });
});

在base.html中，我导入了所有.js

base.html文件

        <script src="{% static 'jq/jquery-3.2.1.min.js' %}"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
        <script src= "{% static 'js/bootstrap.min.js' %}"></script>
        <script src= "{% static 'js/ajax.js' %}"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

问题是当我按下按钮时没有任何反应。这是一个简单的代码，但有些崩溃。在检查中不显示任何错误或遗漏。

当我进入... / home / like /时，它显示为0.

感谢您的帮助。非常感谢。

Answer 1

这里有一些问题。最大的问题是HTML中的多个元素具有相同的ID是无效的;但是你要在循环中为每个div分配id likes。您应该将它添加到类列表中，然后将jQuery绑定到.likes。

Answer 2

<强>已更新根据我在普通标签中编写事件绑定的经验，就像你一样，它不会被绑定。有2个解决方案，我将逐步介绍：

1）绑定文件就绪。另请注意，我使用类绑定，而不是id，所以你还必须更改你的HTML

HTML按钮看起来像这样：

{% for comentario in objects %}
   {% if user.is_authenticated %}
       <button id="likes-{{forloop.counter0}}" data-comid="{{comentario.id}} class="btn btn-warning btn-sm btn-like" type="button">
...(continue as you have)

ajax.js文件看起来像这样：

$(document).ready(function () {
    $(".btn-like").on("click", function (event) {
        let comid = $(this).attr("data-comid");
        $.get("/home/like/", {"comentario_id": comid}, function (data, status) {
            $(this).hide();
        });
     });
)};

2）第二种解决方案是直接在HTML中绑定函数调用，我只会编写按钮定义：

<button id="likes-{{forloop.counter0}}" class="btn btn-warning btn-sm" type="button" onclick="likeThisComment('{{comentario.id}}')>
...(continue as you have)

在此HTML中，您会注意到我已删除了类（＆＃34; .likes＆＃34;）以及＆＃34; data-comid＆＃34;属性，因为onclick我直接将它们作为参数传递给函数。

ajax.js文件

function likeThisComment (comid) {
    $.get("/home/like/", {"comentario_id": comid}, function (data, status) {
        $(this).hide();
    });
}

希望这能让事情变得清晰。并且不要忘记查看本教程：which has good examples

Ajax + Django Like按钮

2 个答案: