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>

如何在Django中使用jQuery更改多个图像src

1 个答案: