javascript之Django 和类似 ajax 的按钮仅适用于第一项

早上好，我的点赞按钮有问题，它只对第一个项目有效，对其他项目无效

这是我的views.py

@login_required 
@require_POST 
def like(request): 
    if request.method == 'POST': 
        user = request.user 
        slug = request.POST.get('slug', None) 
        tweet = get_object_or_404(Tweet, slug=slug) 
        if tweet.likes.filter(id=user.id).exists(): 
            tweet.likes.remove(user) 
            message = 'Your disliked this' 
        else: 
            tweet.likes.add(user) 
            message = 'You liked this' 
    ctx = {'likes_count': tweet.total_likes, 'message':message} 
    return HttpResponse(json.dumps(ctx), content_type='application/json') 

当我在第一个项目上点击“赞”按钮时，效果很好，但是当我在其他项目上点击“赞”按钮时，这不起作用。

我的模型.py

class Tweet(models.Model): 
    user = models.ForeignKey(User, on_delete=models.CASCADE) 
    title = models.CharField('Titulo', max_length=100) 
    text = models.CharField(max_length=160) 
    slug = models.SlugField(max_length=180) 
    likes = models.ManyToManyField(User, related_name='likes') 
    created_date = models.DateTimeField(auto_now_add=True) 
    updated_date = models.DateTimeField(auto_now=True) 
 
    @property 
    def total_likes(self): 
        return self.likes.count() 

这是我的 ajax 凭证:

<script type="text/javascript"> 
$("#like-button").click(function(e){ 
  e.preventDefault(); 
  $.ajax({ 
    type: 'POST', 
    url: "/like/", 
    data: {'slug': $(this).attr('name'), 'csrfmiddlewaretoken': '{{csrf_token}}'}, 
    dataType: "json", 
    success: function(response){ 
      alert("This tweet has " + response.likes_count); 
    }, 
    error: function(rs, r){ 
      alert(rs.responseText); 
    } 
  }); 
}); 
 
</script> 

我的 html 按钮:

    <input 
    type="button" 
    id="like-button" 
    name="{{tweet.slug}}" 
    value="Like {{tweet.total_likes}}" 
    class="btn btn-primary"> 

请您参考如下方法:

如果你有多个输入，你应该使用一个类，而不是一个 id。

<input 
type="button" 
class="like-button" 
name="{{tweet.slug}}" 
value="Like {{tweet.total_likes}}" 
class="btn btn-primary"> 

您还必须更新您的 ajax:

$(".like-button").click(function(e){