如何在 django 中使用 jquery 更改多个图像 src

Posted

技术标签:

【中文标题】如何在 django 中使用 jquery 更改多个图像 src【英文标题】:how to change multiple image src using jquery in django 【发布时间】:2019-09-22 07:11:41 【问题描述】:

我正在尝试根据用户名中的第一个字母更改每个评论的图像 src

% for comment in articles.comments.all %
      <div class="comments py-2 my-3">
           <div class="comments-img-wrapper">
                <img src="" class="comment-image" >
           </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>

但由于某种原因,它一直在为剩余的 cmets 重复第一个 ccomment 的图像,任何人都可以帮忙

【问题讨论】:

【参考方案1】:

您正在使用$('.comment-user-name').text() 获取用户名,该用户名始终在集合中首先返回文本内容,与回调中的当前img 标记无关。

因此,您需要获取与当前img 标签相关的.comment-user-name,以便获取共同父级(.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的主要内容,如果未能解决你的问题,请参考以下文章

通过 jQuery 订购 django 更改列表页面?

使用 jquery、ajax 和 django 定期刷新页面

Django 管理员 - jQuery 命名空间

如何使用 JQuery 仅更改表的 td 内的文本

Django - 以一对多关系更改相关对象的值

在 django 中:使用多个插件加载 jquery 时出现问题 - 或者:如何仅加载 jQuery 一次?