javascript - 如何创建我点击的元素输入的对象？

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) {

确保此更改不会影响您的其他代码