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">

JavaScript的

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'));
}

我試圖使用上述JS來使用$this.data('lng')但不確定為什么它不起作用。

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() set_item $this.text()獲取LI的文本。

Answer 2

將click事件綁定到列表元素是最好的主意，然后您可以輕松識別出被點擊的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">

JavaScript的：

$("#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/