Question

我正在尝试更新“编辑”按钮上的数据ID，但出于某种原因，它会保留在一个ID上，这是从第一个选择中获取的。这是我的代码：

<input type="text" class="form-control" id="clr_name" name="clr_name">

<button type="submit" class="btn col-xs-6 hide edit">Edit</button>
<button type="submit" class="btn col-xs-6 hide delete">Delete</button>

<div class="col-xs-6">
  <table class="table table-striped">
    <tbody>

      <tr>
        <td>Black</td>
        <td data-id="1" class="edit">edit</td>
      </tr>

      <tr>
        <td>White</td>
        <td data-id="2" class="edit">edit</td>
      </tr>

      <tr>
        <td>Blue</td>
        <td data-id="3" class="edit">edit</td>
      </tr>

    </tbody>
  </table>
</div>
<p>ID: <span class="dataId"></span></p>

的JavaScript

$("tbody").on("click", "td.edit", function() {
  formAction($(this).attr("data-id"), $(this).parent(), $(this).prev('td'));
});

function formAction(id, parent, prev) {
  $(".dataId").text(id);
  $("tr").attr('data-edit', null);
  parent.attr("data-edit", true);
  $("#clr_name").val(prev.text());
  $(".edit, .delete").attr("data-id", id);
}

jsfiddle.net/52hyktb4/

Answer 1

它保留在一个id上的原因是你的函数中有这一行：

$(name + " .edit, " + name + " .delete").attr("data-id", id);

首次点击后，您可以将当前设置为文档中.edit和.delete元素的全部。

您可以删除此行，您的代码应该按预期工作。

更新数据属性值

1 个答案: