Как найти значение данных родителя в JQuery

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> 

затем

Cache селектор

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

Вы должны передать это, чтобы скрыть функцию:

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

Answer 4

Прежде, посмотрите на Arun P Johny «s ответ. Если вы используете onclick Event от Tag-Element, он будет ссылаться на window.

Я предлагаю вам использовать событие click, так что вы можете использовать $(this).

$('.location').click(function() { 
    var coordinates = $(this).children('.coordinates'); 

    var longitude = coordinates.data('longitude'); 
    var latitude = coordiantes.data('latitude'); 

    console.log('Latitude: ' + latitude, 'Longitude: ' + longitude); 
});