Я пытаюсь реализовать подобную-непохожую функциональность в проекте блога. Изначально на странице отображаются данные с использованием переменной шаблона Jinja2 в html. Когда пользователь щелкает ссылку «LIKE», он вызывает функцию javascript, в которой функция выборки обновляет данные на сервере, получает последнее количество лайков и статусов лайков и обновляет эти данные в html.
Проблема: JavaScript работает нормально, я вижу, что после выполнения функции onClick количество подобных увеличивается, а значение тега привязки изменяется с «Нравится» на «Не нравится». Но вскоре после того, как для него установлено значение «Не нравится», данные jinja заменяются на «нравится». Я не уверен, что мне здесь не хватает, любая помощь очень приветствуется.
HTML код:
```<div class="media-body">
<div id="post{{post.id}}">
<h4><a class="article-title" href="{% url 'getProfile' post.get_userId %}">{{ post.user.username }}</a></h4>
<div id='existing-post'>
<p class="article-content">{{ post.content }}</p>
<div class="article-metadata">
<small class="text-muted">{{ post.date_posted|date:"F d, Y" }}</small>
<a href="">edit</a>
<input type="hidden" class="hidden" id="userId" value={{user.id}}>
</div>
<i class="fa fa-heart" aria-hidden="true" style="color: red;"></i><span id="countEle"> {{ post.get_likes_count }}</span>
<a href="" class="post{{post.id}}" onclick=changeLikes(this.className) > {% if user in post.get_likes %} Unlike {% else %} Like {% endif%}</a>
</div>
</div>```
JavaScript код:
function changeLikes(clickedId){
divEle=document.getElementById(clickedId);
likedBy= document.getElementById('userId').value;
// id_value=this.id
var likedBy =divEle.querySelector('#userId').value;
postId=clickedId.substring(4)
fetch('/changeLikes', {
method: 'POST',
body: JSON.stringify({
'postId': postId,
'likedBy': likedBy
})
})
.then(response => response.json())
.then(result => {
// Print result
console.log(result);
divEle.querySelector('#countEle').textContent=result.likesCount;
divEle.getElementsByClassName(clickedId)[0].textContent=result.likedStatus;
});
}