将此功能传递给某个功能会更改所有已点击的元素

Question

将图形添加到画布并将点击功能分配给每个项目。在点击编辑窗口显示出来，使用户编辑形状

function place(id, top, leftpx, width, height, color) { 
    var dropped; 

    dropped.attr('s_id', id) 
    .appendTo('.xy') 
    .data({ 
     'posleft': leftpx, 
     'postop': top, 
     'width': width, 
     'height': height, 
     'color': color 
    }) 
    .css({ 
     top: top + "px", 
     left: leftpx + "px", 
     position: "absolute", 
     width: width, 
     height: height 
    }); 

    dropped.resizable({ 
    containment: '.xyz', 
    handles: 'all', 
    stop: function(event, ui) { 
     $(this).data('width', ui.size.width); 
     $(this).data('height', ui.size.height); 
    } 
    }); 

    dropped.click(function(e) { 
    var id = $(this).attr("shelf_id"); // gives the correct id 
    edit($(this)); 
    }); 

当我点击一个项目，它正确地改变颜色，但只要我点击第二个，它也改变颜色之前点击过的项目。对应的功能如下：

function edit(item) { 
    //edit window shows up 

    $("#editDataForm").submit(function(e) { 

    var id_color = $("#colorSelect option:selected").val(); 

    if (item.data('color') != id_color) { 
     switch (id_color) { 
     case '1': 
      item.css("background-color", "yellowgreen"); 
      item.data('color', id_color); 
      break; 
     case '2': 
      item.css("background-color", "indianred"); 
      item.data('color', id_color); 
      break; 
     default: 
      break; 
     } 
    } 
    e.preventDefault(); 
    }); 
} 

有人请给我一个暗示，我的推理错误是哪里。我只是无法破解它

Answer 1

每次拨打电话edit(item)时，都会在窗体中添加一个额外的submit()处理程序。当您提交表单时，所有这些处理函数都会运行，并且当您调用edit时，它们都会更改单击的项目的颜色。

如果您只想影响最后一个，您需要删除以前的事件处理程序。您可以使用.off()方法执行此操作。

function edit(item) { 
    //edit window shows up 

    $("#editDataForm").off("submit").submit(function(e) { 

    var id_color = $("#colorSelect option:selected").val(); 

    if (item.data('color') != id_color) { 
     switch (id_color) { 
     case '1': 
      item.css("background-color", "yellowgreen"); 
      item.data('color', id_color); 
      break; 
     case '2': 
      item.css("background-color", "indianred"); 
      item.data('color', id_color); 
      break; 
     default: 
      break; 
     } 
    } 
    e.preventDefault(); 
    }); 
}