我是JavaScript新手。我想显示一个数组中的名字，每个名字和数据都放在标题标签中。我想在每次点击标题时改变标题的背景颜色。我正在使用小树枝来循环内容。
我试过的是:
<div class="inbox_chat">
{% set newArray = [] %}
{% for msg in msg_details %}
{% if msg.to_name not in newArray %}
<div class="chat_list active_chat">
<div class="chat_people">
<div class="chat_img"> <img src="https://ptetutorials.com/images/user-profile.png" alt="sunil"> </div>
<div class="chat_ib">
<h5 id="txt-msg" onclick="viewMessage('txt-msg')">{{msg.to_name}} <span class="chat_date">{{msg.time}}</span></h5>
</div>
</div>
</div>
{% set newArray = newArray|merge([msg.to_name]) %}
{% endif %}
{% endfor %}
</div>
Javascript代码
<script>
function viewMessage(elementId){
document.getElementById(elementId).style.backgroundColor = 'green';
}
</script>
在这里，当单击时，显示名称的唯一的名字改变。如果我点击列表中的另一个名字，那么名字的颜色也会改变。如果我单击列表中的一个名称，我只想更改被单击名称的背景颜色。不是第一种背景色。
我的输出显示:
输出如何在单击时更改名称的背景颜色。
当您将相同的id添加到多个HTML元素，然后尝试通过该id选择单个元素时，javascript将选择它可以在DOM中找到的第一个id，所以这就是为什么每个id应该是唯一的。
要解决这个问题，您可以删除id并将相同的class添加到元素中，然后将this传递给您正在调用的函数。当函数被调用时，它将选择dom中所有具有class的元素(带有querySelectorAll)并从中删除样式，然后将选择您通过this传递的元素，并将更改颜色。
<body>
<h5 class="name" onclick="viewMessage(this)">this is a name</h5>
<h5 class="name" onclick="viewMessage(this)">this is a name</h5>
<h5 class="name" onclick="viewMessage(this)">this is a name</h5>
<h5 class="name" onclick="viewMessage(this)">this is a name</h5>
<script>
function viewMessage(element) {
document.querySelectorAll('.name').forEach((e) => (e.style = ''))
element.style.backgroundColor = 'green'
}
</script>
</body>
或者您可以使用addEventListener在元素上使用onclick属性来实现相同的功能。下面是代码:
<body>
<h5 class="name">this is a name</h5>
<h5 class="name">this is a name</h5>
<h5 class="name">this is a name</h5>
<h5 class="name">this is a name</h5>
<script>
const allNames = document.querySelectorAll('.name')
allNames.forEach((names) => {
names.addEventListener('click', (element) => {
removeColor()
element.target.style.backgroundColor = 'green'
})
})
function removeColor() {
allNames.forEach((name) => (name.style = ''))
}
</script>
</body>