javascript - 使用 jQuery 仅更新同一 div 类中的一个元素
问题描述
每当用户喜欢帖子并在帖子上显示喜欢的数量时,我都会尝试更新 DOM。但是,我意识到我的功能将更新页面上的所有类,而不仅仅是某些被喜欢的帖子(当用户点击 thmbs 时,所有的竖起大拇指按钮都会变成哑巴)
我改变类似的功能:
function like_post() {
// newly added
$('#like-section #likeBtn').on("click", function (e) {
e.preventDefault();
if($("#like-section #likeBtn i").hasClass("fa-thumbs-up")){
($("#like-section #likeBtn i").removeClass("fa-thumbs-up"))
($("#like-section #likeBtn i").addClass("fa-thumbs-down"))
} else {
($("#like-section #likeBtn i").removeClass("fa-thumbs-down"))
($("#like-section #likeBtn i").addClass("fa-thumbs-up"))
}
});
// end
}
我在 Django 中发布的 HTML 模板:
{% load static %}
<link rel="stylesheet" href="{% static 'css/post/style.css' %}">
<script src="{% static 'js/like-api.js' %}"></script>
<script src="{% static 'js/post.js' %}"></script>
{% for post in posts %}
<script>
$(document).on('click', '.post-detail-clickable-details-view', function () {
var url = $(this).attr("data-url")
document.location.href = url
});
</script>
<div class="row ml-2">
<div class="col-sm-2">
<div class="float-right mb-3 mt-3">
<div>
<img class="img-create-post rounded-circle mr-2" src="https://mdbootstrap.com/img/Photos/Avatars/avatar-5.jpg"
alt="Profile image">
</div>
<div>
<p class="text-muted post-card-date small mr-2">{{ post.get_created_on }} ago</p>
</div>
</div>
</div>
<div class="col-md-10" style="margin-left: -1.6rem;">
<div class="card rounded-0 mb-3 mt-3">
<div class="card-header bg-transparent" style="height: 3rem;">
<h5 style="margin-bottom: 0px;">
<a class="text-dark" style="text-decoration: none;" href="{% url 'home:post-detail' post.guid_url %}">{{ post.title }}</a>
<span class="small text-muted">@{{ post.author.username }}</span>
</h5>
</div>
<div class="card-body post-detail-clickable-details-view text-dark" data-url="{% url 'home:post-detail' post.guid_url %}"
style="margin-top:-0.5rem;">
<a id="post-detail-view-link" href="{% url 'home:post-detail' post.guid_url %}"></a>
<p class="mr-1 text-dark font-weight-bolder">{{ post.author.first_name }} {{ post.author.last_name }}</p>
<p class="card-text pt-2" style="margin-top: -0.9rem;">{{ post.content }}</p>
</div>
<hr style="margin: 0;">
<div class="d-flex align-items-center justify-content-between" >
<div class="row mx-1">
<div id="like-section" class="px-1">
{% include 'home/posts/likes.html' with post=post %}
</div>
<div class="px-1">
<a class="btn btn-md" href="{% url 'home:post-detail' post.guid_url %}">
<span class="text-secondary">
<i class="fas fa-comment"></i> {{ post.comments.count }}
</span>
</a>
</div>
</div>
<div>
<a class="btn btn-md" href="#">
<span class="text-secondary">
<i class="fas fa-share-square"></i>
</span>
</a>
</div>
</div>
</div>
</div>
</div>
{% empty %}
<div class="d-flex justify-content-center">
<h5 class="h5 font-weight-lighter my-3 text-muted">No posts to show</h5>
</div>
{% endfor %}
我的喜欢.html:
{% load static %}
<!-- static file were here -->
{% if request.user.is_authenticated %}
<script src="{% static 'js/post.js' %}"></script>
<script src="{% static 'js/comment.js' %}"></script>
<form action="{% url 'home:post-like' post.id %}" method="POST">
{% csrf_token %}
{% if request.user in post.likes.all or is_liked %}
<button type="submit" id="likeBtn" data-url="{% url 'home:post-like' post.guid_url %}" data-token="{{ csrf_token }}" name="post_id" value="{{ post.id }}" class="btn btn-md">
<span class="text-secondary">
<i class="fas fa-thumbs-down"></i>
<span id="like-count">
{{ post.likes.count }}
</span>
<input type="hidden" id="input-like-count" value=" {{ post.likes.count }} " />
</span>
</button>
{% else %}
<button type="submit" id="likeBtn" data-url="{% url 'home:post-like' post.guid_url %}" data-token="{{ csrf_token }}" name="post_id" value="{{ post.id }}" class="btn btn-md">
<span class="text-secondary">
<i class="fas fa-thumbs-up"></i>
<span id="like-count">
{{ post.likes.count }}
</span>
<input type="hidden" id="input-like-count" value=" {{ post.likes.count }} " />
</span>
</button>
{% endif %}
</form>
<div class="modal fade" id="modal-post-detail">
<div class="modal-dialog modal-dialog-scrollable modal-md adjusted-modal-detail">
<div class="modal-content"></div>
</div>
</div>
{% endif %}
我的计划是更改用户的显示,因此在刷新页面之前无需刷新页面并更新计数。但目前,所有#likeBtn 元素都在更新,而不是单个帖子的元素。如何更新仅被赞的帖子的按钮?
编辑:我将我的 jQuery 更新为此,但它仍然无法正常工作:
$('#like-section #likeBtn').on("click", function (e) {
e.preventDefault();
if($(this).find("#i").hasClass("fa-thumbs-up")){
($(this).find("i").removeClass("fa-thumbs-up").addClass("fa-thumbs-down"))
} else {
($(this).find("i").removeClass("fa-thumbs-down").addClass("fa-thumbs-up"))
}
});
编辑:jsfiddle 链接:https ://jsfiddle.net/mf0xvpho/1/ 这似乎正在工作
解决方案
考虑以下示例。
小提琴:https ://jsfiddle.net/Twisty/2hg60be3/13/
HTML
<div class="like-section">
<button type="submit" class="likeBtn btn btn-md">
<span class="text-secondary">
<i class="red">Button</i>
<span class="like-count">
3
</span>
</span>
</button>
</div>
<div class="like-section">
<button type="submit" class="likeBtn btn btn-md">
<span class="text-secondary">
<i class="blue">Button</i>
<span class="like-count">
2
</span>
</span>
</button>
</div>
<div class="like-section">
<button type="submit" id="likeBtn" class="btn btn-md">
<span class="text-secondary">
<i class="red">Button</i>
<span class="like-count">
1
</span>
</span>
</button>
</div>
JavaScript
$(function() {
$('.like-section').on("click", ".likeBtn", function(e) {
var like_count = parseInt($(".like-count", this).text());
e.preventDefault();
if ($("i", this).hasClass("blue")) {
like_count++;
$("i", this).removeClass("blue").addClass("red");
$(".like-count", this).text(like_count);
} else {
like_count--;
$("i", this).removeClass("red").addClass("blue");
$(".like-count", this).text(like_count);
}
});
});
使用类将允许您对元素进行分组。您可以使用.find()
或简写,$("i", this)
. 它与 相同$(this).find("i")
,只是更短。
推荐阅读
- .net-core - NetCore 使用 SecurityToken 连接到 WCF
- junit - 冲突 org.springframework.boot.test.context.SpringBootTest; 和 org.springframework.test.context.junit.jupiter.SpringExtension;
- storage - 我应该如何篡改证明文件,以便只有我的应用程序可以修改它而不是用户
- powerbi - 来自测量的 PowerBI ZSCORE
- git - 自动签出默认分支的命令
- bash - 使用 sed 将文件从 bash 转换为 csv
- networking - 无法使用 netplan 和 cloud-init 复制 ECMP 设置
- git - ssh -T git@github.com 报告错误无法创建目录'/.ssh'
- python - 如何将产品日期与今天的日期进行比较并创建一个新列来指示它们是否已过期?
- android - 如何获得改造队列的数量?