如何使用 javascript 在 twig 循环中更改 div 的背景颜色

Question

我是 JavaScript 的新手。我想更改循环中 div 元素的背景颜色。每次单击 div 元素时，背景颜色应更改为蓝色。我试过使用 CSS，它有效。我希望在 Javascript 中实现它。我想更改所选 div 的背景颜色。但是我的代码改变了之前选中和当前选中的背景颜色div.

我试过的是：

树枝代码：

        <div class="inbox_chat">
          {% set newArray = [] %}
          {% for msg in msg_details %}
          {% if msg.to_name not in newArray %}

         
        <div class="chat_list active_chat" tabindex="{{loop.index}}" id="{{loop.index}}" onclick="viewMessage('{{loop.index}}')" >
          <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>{{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) 
{ 
var e = document.getElementById(elementId);
var c= window.getComputedStyle(e).backgroundColor;
if (c === "rgb(235, 235, 235)") 
{
document.getElementById(elementId).style.backgroundColor = "blue";
} else
{
document.getElementById(elementId).style.backgroundColor = "rgb(235, 235, 235)";
 }
}
</script>

我的代码改变了当前选中和之前选中的背景颜色div 元素。

我的输出是什么：

Output

如何只更改所选 div 的背景颜色而不更改另一个 div 背景颜色？

Answer 1

您应该使用 getPropertyValue 来获取计算值属性:

function viewMessage(elementId) {
    var e = document.getElementById(elementId);
    var c = window.getComputedStyle(e).getPropertyValue('background-color');
    if (c === "rgb(235, 235, 235)") {
        document.getElementById(elementId).style.backgroundColor = "blue";
    } else {
        document.getElementById(elementId).style.backgroundColor = "rgb(235, 235, 235)";
    }
}

如何使用 javascript 在 twig 循环中更改 div 的背景颜色

How to change background color of div in loop in twig using javascript

javascript

loops

dom

twig

background-color