클릭시 jQuery 속성 가져 오기

Question

다음과 같은 스타일의 목록 항목이 있습니다.

<li onclick="set_item('BRISBANE')" data-lat="-27.46758" data-lng="153.027892"> 
    BRISBANE QLD 4000 
</li> 

항목을 클릭하면 정보를 얻을 수 있지만 다른 2 개의 입력란에는 다른 2 개의 항목을 어떻게 가져올 수 있습니까?

HTML

<input type="text" id="country_id" onkeyup="autocomplet()"> 
<input type="text" id="latitude"> 
<input type="text" id="longitude"> 

자바 스크립트

function set_item(item) { 
    $('#country_id').val(item); 
    $('#country_list_id').hide(); 
    var $this = $(this), 
     lng = $this.data('lng'), 
     lat = $this.data('lat'); 
    $('#latitude').val(lat); 
    $('#longitude').val(lng); 
    alert($this.data('lng')); 
} 

나는 $this.data('lng')를 사용하는 위의 JS를 사용하려고하지만 작동하지 않는 이유는 확실하지 않다.

Answer 1

당신은 함수에 인수로 this 전달해야합니다

function set_item(item, li) { 
 
    $('#country_id').val(item); 
 
    $('#country_list_id').hide(); 
 
    var $this = $(li), 
 
    lng = $this.data('lng'), 
 
    lat = $this.data('lat'); 
 
    $('#latitude').val(lat); 
 
    $('#longitude').val(lng); 
 
    alert($this.data('lng')); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
    <li onclick="set_item('BRISBANE', this)" data-lat="-27.46758" data-lng="153.027892">BRISBANE QLD 4000</li> 
 
</ul> 
 

 
<input type="text" id="country_id"> 
 
<input type="text" id="latitude"> 
 
<input type="text" id="longitude">

는 또한, 당신이 정말로 인수로 문자열 BRISBANE을 통과 할 필요가 없습니다. set_item은 의 텍스트를 얻기 위해 $this.text()을 사용할 수 있습니다.

Answer 2

클릭 이벤트를 요소에 바인딩하면 클릭 한 번을 쉽게 식별 할 수 있습니다. li. 귀하의 경우 $(this)은 $(window) 개체입니다.

HTML :

<ul id="list"> 
    <li data-item="BRISBANE" data-lat="-27.46758" data-lng="153.027892">BRISBANE QLD 4000</li> 
</ul> 

<input type="text" id="country_id"> 
<input type="text" id="latitude"> 
<input type="text" id="longitude"> 

자바 스크립트 :

$("#list li").click(function(e){ 
    // $(this) is your li element 

    $('#country_id').val($(this).data("item")); 
    $('#country_list_id').hide(); 

    var lng = $(this).data('lng'), 
     lat = $(this).data('lat'); 
    $('#latitude').val(lat); 
    $('#longitude').val(lng); 

    alert($(this).data('lng')); 
}); 

데모 :http://jsfiddle.net/