클릭 한 요소 입력의 개체를 만들려면 어떻게해야합니까?

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>