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

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");
  });
};