Question

我有下一个结构：

<div class="location" onclick="hide();">
    <div class="cat_row"></div>
    <div class="coordinates" data-latitude="51.412176" data-longitude="-0.701547"></div>
</div>

我的隐藏功能（）：

var hide = function(){
    var latitude = $(this).children('.coordinates').data('latitude');
    var alert_this = $(this).children('.coordinates').data('latitude');
    alert(alert_this);
}

并打印undefined。有什么问题？

Answer 1

问题出在hide，this是指窗口对象而不是点击的.location元素。

一种解决方案是将location引用作为参数传递给hide，如

<div class="location" onclick="hide(this);">
    <div class="cat_row"></div>
    <div class="coordinates" data-latitude="51.412176" data-longitude="-0.701547"></div>
</div>

然后

var hide = function(el){
    var latitude = $(el).children('.coordinates').data('latitude');
    var alert_this = $(el).children('.coordinates').data('latitude');
    alert(alert_this);
}

缓存选择器

var hide = function (el) {
    var $cord = $(el).children('.coordinates');
    var latitude = $cord.data('latitude');
    var alert_this = $cord.data('latitude');
    alert(alert_this);
}

Answer 2

问题是因为当您使用onclick属性附加事件处理程序时，this关键字不会引用引发事件的元素。你有两个选择。首先，您可以提供this作为参数：

<div class="location" onclick="hide(this);">
    <!-- content -->
</div>

var hide = function(el) {
    var latitude = $(el).children('.coordinates').data('latitude');
    var alert_this = $(el).children('.coordinates').data('latitude');
    alert(alert_this);
}

或者，您可以在JS本身附加事件：

<div class="location">
    <!-- content -->
</div>

$('.location').click(function() {
    var latitude = $(this).children('.coordinates').data('latitude');
    var alert_this = $(this).children('.coordinates').data('latitude');
    alert(alert_this);
});

Answer 3

首先，看看$('#testinput').change(function (){ change(); }); function change(){ alert(); } $("#mybutton").click(function(){ $('#testinput').val('new val'); $("#testinput").trigger("change"); });的回答。如果您使用标记元素中的Arun P Johny事件，则会引用onclick。

我建议您使用点击事件，以便使用window。

$(this)

Answer 4

你需要传递它来隐藏功能：

<div class="location" onclick="hide(this);">
    <div class="cat_row"></div>
    <div class="coordinates" data-latitude="51.412176" data-longitude="-0.701547"></div>
</div>

var hide = function(self){
    var latitude = $(self).children('.coordinates').data('latitude');
    var alert_this = $(self).children('.coordinates').data('latitude');
    alert(alert_this);
}

但最好使用jQuery添加事件：

$('.location').click(funtion() {
    var latitude = $(this).children('.coordinates').data('latitude');
    var alert_this = $(this).children('.coordinates').data('latitude');
    alert(alert_this);
});

如何在jQuery中查找父级的数据值

4 个答案: