用 jQuery 检查哪个元素被点击答案

【问题标题】：Check which element has been clicked with jQuery用 jQuery 检查哪个元素被点击
【发布时间】：2019-03-14 23:49:43
【问题描述】：

我正在尝试使用“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 语法？非常感谢。

【问题讨论】：

你是如何设置你的点击处理程序的？
@vision: “沿线”，例如这是伪代码
互联网上存在大量这些 sn-p 代码。先搜索再问。
@MarcB 是的，我跳过了那句话，盯着当时完全不同的代码块。现在我的评论当然已经过时了。
你为什么不简单地使用一个全局变量呢？这有什么问题？

标签： javascript jquery

【解决方案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
    }
});

【讨论】：

"var target = $(e.target), article; "", article" 在这里做什么？
@masteroleary 这只是一个变量声明，因为 OP 需要从单击的项目 (target) 中评估 CSS 类，以便选择另一个存储在 article 变量中的类.
@OscarJara 所以它的初始化文章是未定义的？真正的问题是：我怎么 15 年没有遇到过这种情况？？？

【解决方案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 变得非常困难。应尽可能避免这种情况。

【讨论】：

对以后阅读此答案的其他人来说只是一个小提示：使用console.log($(this).get())，以防您不确定$(this) 是否选择了您期望的内容。这将在控制台日志中为您打印所选元素的列表。

【解决方案3】：

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

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

【讨论】：

很好，活动使用！请注意，您忘记将事件传递给函数，即function(event)，否则会得到“事件未定义”。

【解决方案4】：

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

【讨论】：

【解决方案5】：

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

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

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

【讨论】：

【解决方案6】：

希望这对你有用。

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

【讨论】：

【解决方案7】：

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

【讨论】：

不幸的是，设置 3 个不同的功能将不起作用。我基本上将该变量用于一种“灯箱”画廊，因此该变量需要驻留在一个单击函数中，该函数可以为整个“灯箱”设置动画。