Обновите только один элемент внутри тех же классов div, используя jQuery - PullRequest
Новая
       3

Обновите только один элемент внутри тех же классов div, используя jQuery

0 голосов
/ 13 апреля 2020

Я пытаюсь обновить DOM всякий раз, когда пользователь любит публикацию и отображает количество лайков в записи. Тем не менее, я понял, что моя функция будет обновлять все классы на страницах, а не только понравившийся пост (когда пользователь нажимает на кнопки вверх, все кнопки «вверх» превращаются в «вниз»)

моя функция для изменить как: 

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
}

мои сообщения HTML шаблон в Django: 

{% 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 %}

мой План состоит в том, чтобы изменить отображение для пользователя, поэтому нет необходимости обновлять sh страницу и обновлять количество отсчетов, а также обновлять страницу. Но в настоящее время обновляются все элементы #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/ Это, кажется, работает сейчас

1 Ответ

1 голос
/ 14 апреля 2020

Рассмотрим следующий пример.

Скрипка: 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"), только короче.

...