如何更改动态创建的元素的颜色？

Question

我有一个动态创建的教室，侧面有3个按钮。

 for classroom in classrooms
   if classroom.author.id == user.id
      tr#bothcells
        td#classroomcell= classroom.classroomname
        td#buttonscell
           button.renameclassroom(data-toggle="tooltip", data-placement="top" ,title="Rename this classroom" type='button' style='font-size:15px', onclick='renameclassroom($(this))' value=classroom.id)
              i.fas.fa-pencil-alt
           button.showstudents(data-toggle="tooltip", data-placement="top" ,title="Show all students belonging to this classroom" style='font-size:15px' type='button',  onclick='get($(this))', value=classroom.id )
              i.fas.fa-user-graduate
           a.deleteclassroom(data-toggle="tooltip", data-placement="top" ,title="Delete this classroom" style='font-size:15px',href="/classroom/delete/" + classroom._id)
              i.fas.fa-times

..以及此jQuery AJAX，用于获取属于该教室的学生的姓名。

function get(a){
  var classroomvalue = a.val();
  $.ajax({
    type: 'GET',
    url: 'http://localhost:8080/classroom/' + classroomvalue,
  })

  .done(function(data) {
    console.log('Get response:', JSON.stringify(data,  "", 2));
    $("#getResponse").html($(data).find('#students').html());
  })
  .fail(function(jqXHR, textStatus, err) {
    console.log('Ajax error response:', textStatus);
  });
};

我在哪里挣扎，这是我的问题吗？ 由于教室和按钮是动态创建的，因此我需要在按下按钮时更改按钮图标的颜色，我知道我不能使用Id而是值。我真的很难找到解决方案，但我什么都没想。

已更新HTML

Answer 1

首先，让多个元素共享相同的id是错误的，因为id属性用于唯一标识一个元素。除此之外，在这种情况下，您可以使用以下代码来摆脱它。但是，您最好使用类。

代码：

function get (a) {
  var classroomvalue = a.val();

  $.ajax({
    type: 'GET',
    url: 'http://localhost:8080/classroom/' + classroomvalue,
  })
  .done(function (data) {
    console.log('Get response:', JSON.stringify(data, "", 2));
    $("#getResponse").html($(data).find('#students').html());

    /* Reset the colour of all buttons' icons. */
    a.closest("tbody").find("tr button > i").css("color", "");

    /* Make the current button's icon's colour red. */
    a.children("i").css("color", "red");
  });
};