Проверьте, какой элемент был нажат с помощью jQuery

Question

Я пытаюсь использовать оператор 'if', чтобы определить, какой элемент был нажат.

В основном я пытаюсь кодировать что-то вдоль линий:

if (the element clicked is '#news_gallery li .over') { 
    var article = $('#news-article .news-article'); 
} else if (the element clicked is '#work_gallery li .over') { 
    var article = $('#work-article .work-article'); 
} else if (the element clicked is '#search-item li') { 
    var article = $('#search-item .search-article'); 
}; 

Что такое правильный синтаксис JQuery для этого? Спасибо заранее.

Answer 1

Используйте это, я думаю, я могу получить вашу идею.

Живая демонстрация:http://jsfiddle.net/oscarj24/h722g/1/

$('body').click(function(e) { 

    var target = $(e.target), article; 

    if(target.is('#news_gallery li .over')) { 
     article = $('#news-article .news-article'); 
    } else if (target.is('#work_gallery li .over')) { 
     article = $('#work-article .work-article'); 
    } else if (target.is('#search-item li')) { 
     article = $('#search-item .search-article'); 
    } 

});​ 

Answer 2

$("#news_gallery li .over").click(function() { 
    article = $("#news-article .news-article"); 
}); 

Answer 3

Основой JQuery является возможность найти элементы в DOM через селекторы, а затем проверку свойств на этих селекторов. Читайте на селекторов здесь:

http://api.jquery.com/category/selectors/

Однако, было бы больше смысла создавать обработчики событий для событий щелчка для различных функциональных возможностей, которые должны происходить на основании того, что нажата.

Answer 4

Итак, вы делаете это немного назад. Как правило, вы могли бы сделать что-то вроде этого:

​<div class='article'> 
    Article 1 
</div> 
<div class='article'> 
    Article 2 
</div> 
<div class='article'> 
    Article 3 
</div>​ 

, а затем в вашем JQuery:

$('.article').click(function(){ 
    article = $(this).text(); //$(this) is what you clicked! 
    });​ 

Когда я вижу такие вещи, как #search-item .search-article, #search-item .search-article и #search-item .search-article чую вы overspecifying ваш CSS, который делает запись сжатие jQuery очень сложно. Этого следует избегать, если это вообще возможно.

Answer 5

Надеется, что это полезна для вас.

$(document).click(function(e){ 
    if ($('#news_gallery').on('clicked')) { 
     var article = $('#news-article .news-article'); 
    } 
}); 

Answer 6

Answer from vpiTriumph подробно излагает детали.
Вот небольшой удобный вариант, когда есть уникальные идентификаторы элементов для набора данных вы хотите получить доступ к:

$('.news-article').click(function(){  
    var id = event.target.id; 
    console.log('id = ' + id); 
}); 

Answer 7

Другим вариантом может быть, чтобы использовать tagName свойство e.target. Он здесь не применяется, но предположим, что у меня есть класс того, что применяется к DIV или тегу A, и я хочу посмотреть, был ли этот класс нажат, и определить, был ли он или A, что был нажат. Я могу сделать что-то вроде:

$('.example-class').click(function(e){ 
    if ((e.target.tagName.toLowerCase()) == 'a') { 
    console.log('You clicked an A element.'); 
    } else { // DIV, we assume in this example 
    console.log('You clicked a DIV element.'); 
    } 
});