javascript - jQuery each 和附加点击事件

Question

我试图在每个类元素上实现条件单击事件。这是我的代码。

//Edit input field
$('.js-edit, .js-save').each(function(index) {
  $(this).on("click", function() {
    var $form = $(this).closest('form');
    $form.toggleClass('is-readonly is-editing');
    var isReadonly = $form.hasClass('is-readonly');
    $form.find('input').prop('disabled', isReadonly);
  });
});

form.is-readonly .btn-save {
  display: none;
}

form.is-readonly input[disabled],
form.is-readonly textarea[disabled] {
  cursor: text;
  background-color: #fff;
  border-color: transparent;
  outline-color: transparent;
  box-shadow: none;
}

form.is-editing .btn-edit {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="is-readonly" action="" method="post">
  <input type="text" class="form-control is-disabled" value="40" disabled>
  <button type="button" class="btn-edit js-edit">Edit</button>
  <button type="button" class="btn-save js-save">Save</button>

  <input type="text" class="form-control is-disabled" value="38" disabled>
  <button type="button" class="btn-edit js-edit">Edit</button>
  <button type="button" class="btn-save js-save">Save</button>

</form>

我有两个输入字段，目前单击事件使两个字段都可编辑，我希望它对每个字段单独工作。

我希望你们能理解我的问题。

提前致谢。

Answer 1

这就是你想要的吗？

我将每个字段及其对应的按钮包装在一个 div 中，并稍微更改了脚本以匹配新的 HTML。

//Edit input field
$('.js-edit, .js-save').each(function(index) {
  $(this).on("click", function() {
    var $group = $(this).closest('.group');
    $group.toggleClass('is-readonly is-editing');
    var isReadonly = $group.hasClass('is-readonly');
    $group.find('input').prop('disabled', isReadonly);
  });
});

.group.is-readonly .btn-save {
  display: none;
}

.group.is-readonly input[disabled],
.group.is-readonly textarea[disabled] {
  cursor: text;
  background-color: #fff;
  border-color: transparent;
  outline-color: transparent;
  box-shadow: none;
}

.group.is-editing .btn-edit {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" method="post">
  <div class="group is-readonly">
   <input type="text" class="form-control is-disabled" value="40" disabled>
   <button type="button" class="btn-edit js-edit">Edit</button>
   <button type="button" class="btn-save js-save">Save</button>
  </div>

  <div class="group is-readonly">
    <input type="text" class="form-control is-disabled" value="38" disabled>
    <button type="button" class="btn-edit js-edit">Edit</button>
    <button type="button" class="btn-save js-save">Save</button>
  </div>

</form>