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

将此传递给函数会更改所有单击的元素

1 个答案: