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

我有下一个结构：

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

---

并打印未定义的

。问题出在哪里？

问题出在

hide

，

此

指的是窗口对象，而不是单击的

.location

元素

一种解决方案是将

位置

引用作为参数传递给

隐藏

like

<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 $cord = $(el).children('.coordinates');
    var latitude = $cord.data('latitude');
    var alert_this = $cord.data('latitude');
    alert(alert_this);
}

---

问题出在

隐藏

，

此

引用的是窗口对象，而不是单击的

位置

元素

一种解决方案是将

位置

引用作为参数传递给

隐藏

like

<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 $cord = $(el).children('.coordinates');
    var latitude = $cord.data('latitude');
    var alert_this = $cord.data('latitude');
    alert(alert_this);
}

---

问题是因为当您使用

onclick

属性附加事件处理程序时，

this

关键字不引用引发事件的元素。你有两个选择。首先，您可以将此作为参数提供：

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

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

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

---

问题是因为当您使用

onclick

属性附加事件处理程序时，

this

关键字不引用引发事件的元素。你有两个选择。首先，您可以将此作为参数提供：

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

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

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

---

您需要传递此消息以隐藏函数：

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

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

但最好使用jQuery添加事件：

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

---

您需要传递此消息以隐藏函数：

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

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

但最好使用jQuery添加事件：

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

---

首先，看看Arun p Johny的答案。如果使用标签元素中的

onclick

事件，它将引用

窗口

我建议您使用click事件，这样您就可以使用

$（this）

---

首先，看看Arun p Johny的答案。如果使用标签元素中的

onclick

事件，它将引用

窗口

我建议您使用click事件，这样您就可以使用

$（this）