jQuery get 属性在点击时

jQuery get attribute on click

本文关键字：get 属性 jQuery      更新时间：2023-09-26

我有以下样式的列表项。

<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')但不确定为什么它不起作用。

您需要将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()来获取LI的文本。

最好将单击事件绑定到列表元素，然后您可以轻松识别单击的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/

相关文章：