Question

我有一个具有以下段的功能，如下所示，我想要做的是当人们点击列表中的编辑按钮时修改列表项的背景颜色。不知何故，我得到的是工作。因此，我们的想法是为组中的每个列表项使用唯一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");
         });

      });
   });
}

Answer 1

一般来说，在每个锚上创建点击处理程序并不是一个好主意，而是可以使用事件冒泡到父级，你应该添加到achor类.edit-parent以过滤编辑事件...

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

Answer 2

这是我发现的答案，对于那些感兴趣的人。由于它是一个列表并且项目重复，因此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");
     });

  });
 });
}

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

2 个答案: