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

【问题标题】：Javascript change background color with function and css of a list itemJavascript使用列表项的函数和css更改背景颜色
【发布时间】：2016-05-15 17:42:05
【问题描述】：

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

      });
   });
}

【问题讨论】：

我已经整理了你的代码，现在应该很清楚为什么会出现这个问题。您的引用似乎不匹配。
您似乎正在创建一个html 字符串，该字符串会将重复的id 附加到document；虽然字符串实际上并未附加到document。另外，data、ihaveaname、dataidfromdb 似乎没有在datafromdbwithJSON 函数中定义？
您好，是的，代码的第一个功能已被剥离，因此能够更好地演示我想要做什么，但是这部分工作完美。这是关于第二部分，clickonme 功能我似乎无法工作..
尝试将.click()移出$.each()
不行，效果也不好

标签： javascript html css list button

【解决方案1】：

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

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

【讨论】：

嗨，我的朋友也在想同样的方向，但我不知道如何实现你在代码上写的内容。
嗨，Ewald，我不知道如何为您提供更多帮助。您只发布了代码示例。当您从服务器接收 JSON 时，我怀疑您在某处添加动态
元素的

【解决方案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");
     });

  });
 });
}

【讨论】：