我正在尝试根据用户名中找到的第一个字母更改每个评论的图像 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>
但由于某种原因,它不断重复剩余评论的第一个评论的图像,任何人都可以帮忙
最佳答案
您正在使用$('.comment-user-name').text()
获取始终在集合中首先返回文本内容的用户名,与当前 img
无关回调中的标记。
所以你需要获取.comment-user-name
与当前相关img
标签,为此获取公共(public)父级( .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>
关于jquery - 如何在django中使用jquery更改多个图像src,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55974881/