javascript - 用 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');
    }

    if (article) {
       // Do Something
    }
});​

Answer 2

所以你这样做有点倒退。通常你会做这样的事情：

​<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我感觉你过度指定了你的 CSS，这使得编写简洁的 jQuery 变得非常困难。如果可能的话，应该避免这种情况。

Answer 3

vpiTriumph 的回答很好地列出了细节。
当您要访问的数据集有唯一的元素 ID 时，这是一个方便的小变体：

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

Answer 4

另一种选择是tagName利用e.target. 它在这里并不完全适用，但假设我有一个应用于 aDIV或A标签的类，我想查看该类是否被点击，并确定它是被点击的DIV还是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.');
  }
});

Answer 5

jQuery 的基础是能够通过选择器在 DOM 中查找项目，然后检查这些选择器上的属性。在此处阅读选择器：

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

但是，根据单击的内容为应该发生的不同功能的单击事件创建事件处理程序会更有意义。

Answer 6

希望这对你有用。

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

Answer 7

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