Javascript使用列表项的函数和css更改背景颜色

我有一个如下所示的功能，我想做的是当人们单击列表中的编辑按钮时修改列表项的背景色。不知怎的，我没有时间去工作。因此，我们的想法是为组中的每个列表项使用唯一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");
         });

      });
   });
}

函数datafromJSON（id\u程序）{
$.ajax({
url:“/xxxxxx”，
键入：“获取”，
成功：功能（数据）{
$。每个（数据、功能（i、项）{
var li='一般来说，在每个锚点上创建单击处理程序不是一个好主意，相反，您可以使用事件冒泡到父级，并且您应该添加到achor类中。编辑父级用于筛选编辑事件

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

一般来说，在每个锚点上创建单击处理程序不是一个好主意，相反，您可以使用事件冒泡到父级，并且您应该添加到achor类。编辑父级用于过滤编辑事件

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

这是我为感兴趣的人找到的答案。因为它是一个列表，而且项目会重复，所以ID也会重复，并且不允许使用同一ID两次。因此，通过将ID重命名为唯一的名称（在本例中，我还向该函数添加了dataid，该函数工作得非常完美。现在我能够在列表元素或页面上的任何其他div上使用各种css效果

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

  });
 });
}

函数datafromJSON（id\u程序）{
$.ajax({
url:“/xxxxxx”，
键入：“获取”，
成功：功能（数据）{
$。每个（数据、功能（i、项）{
var li='这是我为感兴趣的人找到的答案。因为它是一个列表，而且项目会重复，所以ID也会重复，并且不允许使用同一ID两次。因此，通过将ID重命名为唯一的名称（在本例中，我还向该函数添加了dataid，该函数工作得非常完美。现在我能够在列表元素或页面上的任何其他div上使用各种css效果

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

  });
 });
}

函数datafromJSON（id\u程序）{
$.ajax({
url:“/xxxxxx”，
键入：“获取”，
成功：功能（数据）{
$。每个（数据、功能（i、项）{
var li='我已经对您的代码进行了整理，现在应该很清楚为什么会出现此问题。您的引号似乎不匹配。您似乎正在创建一个
html
字符串，该字符串将重复的
id
附加到
文档
；尽管该字符串实际上并没有附加到
文档
。此外，
数据
，
ihaveaname
，
dataidfromdb
似乎没有在
datafromdbwithJSON
函数中定义？您好，是的，这是代码的第一个函数，因此可以更好地演示我想做的事情，但是这部分工作非常完美。这是关于第二部分，clickonme函数我似乎无法工作。试试看移动
。在
$之外单击（）
。每个（）
nope也不起作用，我已经整理了你的代码，现在应该很清楚为什么会出现这个问题。你的引号似乎不匹配。你似乎正在创建一个
html
字符串，它会将重复的
id
附加到
文档
；虽然字符串实际上并没有附加到
文档e> 另外，
data
、
ihaveaname
、
dataidfromdb
似乎没有在
datafromdbwithJSON
函数中定义？您好，是的，这是代码的第一个函数，因此更能演示我想做的事情，但是这部分工作非常完美。这是关于第二部分，clickonme函数似乎不起作用。请尝试移动
。在
$之外单击（）
。每个（）
nope也不起作用嗨，我的朋友也有同样的想法，但我不知道如何实现你在代码上写的东西。嗨，Ewald，我不知道如何帮助你更多。你只发布了一个代码示例。我想你有一个
元素，当你从服务器接收JSON时，你可以在其中附加动态
元素。所以删除它$（'#clickonme'）处理程序，并将我的处理程序添加到
元素中（甚至在创建ajax请求之前）对于每个动态添加编辑父类。嗨，我的朋友也有同样的想法，但我不知道如何实现你在代码中所写的内容。嗨，Ewald，我不知道如何为你提供更多帮助。你只发布了一个代码示例。我问你是否有
元素，当你从serve收到JSON时，你可以在其中添加动态
元素r、 因此，从示例代码中删除$（'#clickonme'）处理程序，并将我的处理程序添加到
元素（甚至在创建ajax请求之前）和每个动态添加编辑父类。