使用 jQuery 仅更新同一 div 类中的一个元素

Posted

技术标签:

【中文标题】使用 jQuery 仅更新同一 div 类中的一个元素【英文标题】:Update only one element inside same div classes using jQuery 【发布时间】:2020-07-26 11:48:09 【问题描述】:

每当用户喜欢帖子并在帖子上显示喜欢的数量时,我都会尝试更新 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"
          >
        </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/ 这似乎现在可以工作了

【问题讨论】:

您的选择器似乎有问题:$('#like-section #likeBtn') 这似乎不存在。 % include 'home/posts/likes.html' with post=post % 确实存在于我的代码我正在尝试仅在该 div 中更新子元素 您的代码中是否有多个id="like-section",我看不到% include 'home/posts/likes.html' with post=post % 会导致什么结果。请提供一个最小的、可重现的示例:***.com/help/minimal-reproducible-example 是的,我有 likes.html 文件。我现在正在构建一个 jsfiddle,我会尽快发送 【参考方案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")一样,只是更短。

【讨论】:

以上是关于使用 jQuery 仅更新同一 div 类中的一个元素的主要内容,如果未能解决你的问题,请参考以下文章

如何在 Jquery 中选择同一类中悬停的一个

如何使 jQuery 函数迭代从同一类中的 2 个列表中获取的单独数组?

只允许使用 jQuery 检查同一 div 中的复选框

影响所有图像的脚本而不是仅包含某些文本的div中的图像(jQuery)

JPA Hibernate 将类中的类中的字段映射到同一个表

通知窗口中的 Jquery NOTY 更新输入或 div?