クリックした要素の入力オブジェクトを作成するにはどうすればよいですか？

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

は、この変更は、あなたの他のコードの残りの部分に影響を与えないことを確認してください

Answer 2

あなたはこれを試すことがあります。

$(".color").click(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>