Javascript通过列表项的函数和css来更改背景颜色

Javascript change background color with function and css of a list item

本文关键字：css 颜色 背景 函数 列表 Javascript      更新时间：2023-09-26

我有一个函数，如下所示，我想做的是当人们单击列表中的编辑按钮时修改列表项的背景色。不知怎么的，我不想去上班。因此，我们的想法是为组的每个列表项使用唯一的id，并在第二个函数中使用该id作为唯一的id。我做错了什么。

function datafromJSON(id_program) {
$.ajax({
    url: "/xxxxxx",
    type: "GET",
    success: function (data) {
        $.each(data, function (i, item) {
     var li = '<li id='ihaveaname ' + dataidfromdb + '" style =background-color:transparent;" > '
           + ' < a href = "" id = "clickonme" > < span class = "icon-edit" < /span></a > '
           + ' < /li>';
         $('#clickonme').click(function () {
           $('#ihaveaname' + dataidfromdb  + '').css("background-color", "red");
         });
      });
   });
}

通常，在每个锚点上创建点击处理程序不是一个好主意，相反，您可以使用事件的冒泡作为父级，并且您应该添加到achor class.edit parent中以过滤编辑事件。。。

$('ul.parentofli').on('click', '.edit-parent', function(event) {
  $(event.target).closest('li').css('background-color', 'red');
});

以下是我为感兴趣的人找到的答案。由于这是一个列表，项目会重复，ID也会重复，并且不允许使用同一ID两次。因此，通过将id重命名为一个唯一的名称（在这种情况下，我还将dataid添加到该名称中），该函数非常有效。现在，我可以在列表元素上使用各种css效果，或者在页面上使用任何其他div。

function datafromJSON(id_program) {
$.ajax({
url: "/xxxxxx",
type: "GET",
success: function (data) {
    $.each(data, function (i, item) {
 var li = '<li id='ihaveaname ' + dataidfromdb + '" style =background-color:transparent;" > '
       + ' < a href = "" id = "clickonme ' + dataidfromdb + '" > < span class = "icon-edit" < /span></a > '
       + ' < /li>';
     $('#clickonme' + dataidfromdb +').click(function () {
       $('#ihaveaname' + dataidfromdb  + '').css("background-color", "red");
     });
  });
 });
}
相关文章：