如何在 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的主要内容,如果未能解决你的问题,请参考以下文章