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作为参数传递给函数：

＆＃13;

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

＆＃13;

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

＆＃13;

另外，您并不需要将字符串BRISBANE作为参数传递。 set_item可以使用$this.text()获取LI的文字。

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

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/

jQuery get click属性

2 个答案: