如何切换类点击按钮在循环?

Question

尝试将文章添加到书签。帖子在主页上与在for循环。我有麻烦得到切换类，而点击添加书签按钮为个别帖子。

<<p>Django视图/strong>

@login_required
def add_post_bookmark(request):
''' add post to bookmark '''
if request.POST.get('action') == 'post':
result = ''
is_bookmark = False
id_ =  request.POST.get('id')
post = Post.objects.get(id=id_)
if post.bookmarks.filter(id=request.user.id).exists():
post.bookmarks.remove(request.user)
is_bookmark = False
post.save()
result = post.get_bookmarks_count()
else:
post.bookmarks.add(request.user)
is_bookmark = True
post.save()
result = post.get_bookmarks_count()
return JsonResponse({'result': result, 'bookmark_count': post.bookmarks.all().count(), 'post_id': id_, 'is_bookmark': is_bookmark})

/p>

// bookmarks posts
$(document).on('click', '#bookmark_add', function (e) {
e.preventDefault();
var bookmarkCount;
var id = $(this).data("id");
$.ajax ({
type: 'POST',
url: '{% url "users:add-post-bookmark" %}',
data: {
'id': id,
csrfmiddlewaretoken: '{{ csrf_token }}',
action: 'post'
},
success: function (response) {
$('#'+id).empty().append(response['bookmark_count']);
console.log(response);
this_id = $(this).data("data-id");  //("id")
console.log(this_id);  // undefined
$(this).find('i').toggleClass("fad fa-bookmark far fa-bookmark");
},
error: function (xhr, errmsg, err) {
console.log("Error bookmarking post!");
}
});
})

index . html

<span id="{{post.id}}" class="bookmark_coun text-muted">{{ post.get_bookmarks_count }}</span>
{% if request.user.is_authenticated %}
{% if request.user not in post.bookmarks.all %}
<button id="bookmark_add" class="bookmark" name="bookmark" data-id="{{post.id}}"><i class="far fa-bookmark fa-lg"></i></button>
{% else %}
<button id="bookmark_add" class="bookmark" name="bookmark" data-id="{{post.id}}"><i class="fad fa-bookmark fa-lg"></i></button>
{% endif %}
{% else %}
<a href="{% url 'users:register' %}" id="bookmark_add" class="bookmark"><i class="far fa-bookmark fa-lg"></i></a>
{% endif %}

问题:每次我尝试书签时它都会切换到其他元素。我试过通过id获取元素，但它也不起作用。

尝试了，但仍然没有结果:

this_id = $('#bookmark_add').data("id");  //("id")
console.log(this_id);
if (this_id === id) {
$("button[this_id]").find('i').toggleClass("fad fa-bookmark far fa-bookmark");
}

Answer 1

我想你是在错误的方式得到按钮的id。使用jquery的onclick方法，可以使用attr方法得到被点击按钮的id，如下所示

$('.bookmark').click(function() { 
var id = $(this).attr('id');
});

$('.bookmark').click(function() { 
console.log($(this).attr('data-id'));
console.log("BEFORE: " + $(this).find('i').attr('class'));
$(this).find('i').toggleClass("fad fa-bookmark far fa-bookmark");
console.log("AFTER: " + $(this).find('i').attr('class'));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="bookmark_add" class="bookmark" name="bookmark" data-id="1">
<i class="far fa-bookmark fa-lg"> Test 1</i>
</button>

<button id="bookmark_add" class="bookmark" name="bookmark" data-id="2">
<i class="fad fa-bookmark fa-lg"> Test 2</i>
</button>

即使不获得id，您也可以在上面的click事件定义中切换i元素的class，像这样

$('.bookmark').click(function() { 
$(this).find('i').toggleClass("fad fa-bookmark far fa-bookmark");
});

请告诉我这是否有效。