无限滚动工作但不按应有的方式做事

Question

我想在我的网站上显示我使用无限滚动的用户评分，但我遇到了一个问题。
当它在调用 <a class="infinite-more-link" href="?page={{ ratings.next_page_number }}"></a> 之前首次加载数据时，它会显示带有投票计数的星星，但是在调用 <a class="infinite-more-link" href="?page={{ ratings.next_page_number }}"></a> 之后它不会显示星星。
我的 views.py

@login_required
def ratings_user(request,pk):
    ratings = VoteUser.objects.filter(the_user_id=pk).order_by('-pk')
    paginator = Paginator(ratings, 1)
    page = request.GET.get('page')
    try:
        posts = paginator.page(page)
    except PageNotAnInteger:
        posts = paginator.page(1)
    except EmptyPage:

        posts = paginator.page(paginator.num_pages)
    return render(request,request.session['is_mobile']+'profile/ratings.html',{'ratings':posts})

html

{% extends 'mobile/profile/base.html' %}
{% load static %}
{% load crispy_forms_tags %}
{% load get_companion %}
{% load cache %}
{% block title %}
Ratings
{% endblock %}

{% block leftcontent %}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css" rel="stylesheet">
{% endblock %}
{% block middlecontent %}
 <div class="infinite-container">

{% for i in ratings %}
 <div class="infinite-item">
     
<div class="w3-container w3-card w3-white w3-round w3-margin">
    <img src="{{ i.the_user.profile.avatar.url }}" alt="Avatar" class="w3-left w3-circle w3-margin-right" style="width:40px;height:40px;border-radius:50%;">

        <a href ="{% url 'profile' i.the_user_id %}" style="color:black;">{% with user=i.the_user.profile %}{{ user.prenom|title|truncatewords:2 }} {{ user.nom|title|truncatewords:1 }}{% endwith %}</a>
        <br>

       <span class="stars" data-rating="{{ i.vote.vote }}" data-num-stars="5" ></span>
        <hr class="w3-clear">
        <p>
        {{ i.commentaire|linebreaksbr }}
        </p>
        <span class="glyphicon glyphicon-user"></span> <a href ="{% url 'profile' i.the_sender_id %}">{% with user=i.the_sender.profile %}{{ user.prenom|title|truncatewords:2 }} {{ user.nom|title|truncatewords:1 }}{% endwith %}</a>
</div>
</div>
{% endfor %}
</div>
   {% if ratings.has_next %}
    <a class="infinite-more-link" href="?page={{ ratings.next_page_number }}"></a>
  {% endif %}
{% endblock %}
{% block rightcontent %}

{% endblock %}
{% block js %}
  <script>
    var infinite = new Waypoint.Infinite({
      element: $('.infinite-container')[0]
    });
  </script>
<script>
//ES5
$.fn.stars = function() {
    return $(this).each(function() {
        var rating = $(this).data("rating");
        var fullStar = new Array(Math.floor(rating + 1)).join('<i class="fas fa-star"></i>');
        var halfStar = ((rating%1) !== 0) ? '<i class="fas fa-star-half-alt"></i>': '';
        var noStar = new Array(Math.floor($(this).data("numStars") + 1 - rating)).join('<i class="far fa-star"></i>');
        $(this).html(fullStar + halfStar + noStar);
    });
}

//ES6
$.fn.stars = function() {
    return $(this).each(function() {
        const rating = $(this).data("rating");
        const numStars = $(this).data("numStars");
        const fullStar = '<i class="fas fa-star"></i>'.repeat(Math.floor(rating));
        const halfStar = (rating%1!== 0) ? '<i class="fas fa-star-half-alt"></i>': '';
        const noStar = '<i class="far fa-star"></i>'.repeat(Math.floor(numStars-rating));
        $(this).html(`${fullStar}${halfStar}${noStar}`);
    });
}
</script>
<script>
            $(function(){
                $('.stars').stars();
            });
        </script>
{% endblock %}

我试过将 <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css" rel="stylesheet"> 放在 class="infinite-item" 中，但 help.what 不是这样的原因吗？谢谢。

Answer 1

看起来 .stars() 不会查找添加到 DOM 的新元素。您应该在 Waypoint.Infinite 中寻找回调函数配置选项，您可以在新元素上调用 .stars()。

无限滚动工作但不按应有的方式做事

infinite scroll working but not doing things as it should

javascript

django

jquery

django-templates

django-models