Как изменить несколько изображений SRC с помощью JQuery в Django

Question

Я пытаюсь изменить src изображения для каждого комментария в зависимости от первой буквы, найденной в имени пользователя

{% for comment in articles.comments.all %}
      <div class="comments py-2 my-3">
           <div class="comments-img-wrapper">
                <img src="" class="comment-image" alt="">
           </div>
           <div class="comments-details">
                 <h5 class="comment-user-name">{{comment.user}} <span class="float-right date">{{comment.created}}</span></h5>
                 <p>{{comment.body}}</p>
            </div>
       </div>
       {% empty %}
       <p>there are no comments</p>
{% endfor %}

и используемого мной кода jquery:

<script>
    $(".comment-image").each(function(){
        username = $('.comment-user-name').text();
        usernameFirstletter = username.charAt(0).toUpperCase();
        console.log(usernameFirstletter)
        $(".comment-image").attr('src', '/static/img/avatars/' + usernameFirstletter + '.svg');
      });
</script>

но по какой-то причине он продолжает повторять изображение первого комментария для оставшихся комментариев, может кто-нибудь помочь

Answer 1

Вы используете $('.comment-user-name').text() для получения имени пользователя, которое всегда возвращает текстовое содержимое первым среди коллекции независимо от текущего тега img в обратном вызове.

Таким образом, вам нужно получить .comment-user-name, связанный с текущим тегом img, для этого получите общего родителя (.comments) и получите его. В дополнение к этому, вы должны обновить src атрибут текущего элемента вместо $(".comment-image").attr(...), что обновляет атрибут всех элементов.

<script>
    $(".comment-image").each(function(){
        let username = $(this).closest('.comments').find('.comment-user-name').text();
        let usernameFirstletter = username.charAt(0).toUpperCase();
        console.log(usernameFirstletter)
        $(this).attr('src', '/static/img/avatars/' + usernameFirstletter + '.svg');
      });
</script>

---

Вы можете сделать это еще проще, используя метод attr() с обратным вызовом, который перебирает элементы внутри и обновляет возвращаемое значение обратного вызова.

<script>
    $(".comment-image").attr('src', function(){
        let username = $(this).closest('.comments').find('.comment-user-name').text();
        let usernameFirstletter = username.charAt(0).toUpperCase();
        return '/static/img/avatars/' + usernameFirstletter + '.svg';
      });
</script>