將此功能傳遞給某個功能會更改所有已點擊的元素

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