如何创建单击元素输入的对象？

Question

单击颜色时,会创建一个对象.

$(document).off("click", ".color").on("click", ".color", function (event) {
  var result = {};
  $.each($('.color input').serializeArray(), function() {
      result[this.name] = this.value;
  });
  console.log(result);
});

.color{height:100px;width:200px}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="color" style="background-color:pink">
<input type="hidden" name="name" value="fred">
<input type="hidden" name="id" value="23">
</div>

<div class="color" style="background-color:blue">
<input type="hidden" name="name" value="laura">
<input type="hidden" name="id" value="14">
</div>

但我希望实现点击颜色的对象被创建.

$(document).off("click", ".color").on("click", ".color", function (event) {
  var result = {};
  var this = $(this);
  $.each($(this 'input').serializeArray(), function() {
      result[this.name] = this.value;
  });
  console.log(result);
});

.color{height:100px;width:200px}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="color" style="background-color:pink">
<input type="hidden" name="name" value="fred">
<input type="hidden" name="id" value="23">
</div>

<div class="color" style="background-color:blue">
<input type="hidden" name="name" value="laura">
<input type="hidden" name="id" value="14">
</div>

Answer 1

如下所示: -

$.each($(this).find('input').serializeArray(), function() {

工作片段: -

$(document).off("click", ".color").on("click", ".color", function (event) {
  var result = {};
  $.each($(this).find('input').serializeArray(), function() {
    result[this.name] = this.value;
  });
  console.log(result);
});

.color{
  height:100px;
  width:200px
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="color" style="background-color:pink">
  <input type="hidden" name="name" value="fred">
  <input type="hidden" name="id" value="23">
</div>

<div class="color" style="background-color:blue">
  <input type="hidden" name="name" value="laura">
  <input type="hidden" name="id" value="14">
</div>

注意: - 我无法.off()在您的代码中看到方法的重要性,因此您可以尝试: -

$(document).on("click", ".color", function (event) {

确保此更改不会影响其他代码的其余部分