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>

Answer 2

简单地分别附加事件：

$(document).on('click', '.js-edit', function(){
  console.log('Coming from Edit Button')
});
$(document).on('click', '.js-save', function(){
  console.log('Coming from SaveButton')
});

Answer 3

您为表单元素设置了类，这是错误的。您应该为输入父级设置类（例如容器类）

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

.container.is-readonly .btn-save {
  display: none;
}

.container.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="container 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="container 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>

jQuery每个并附加click事件

3 个答案: