Javascript 用 jQuery 检查哪个元素被点击
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10706903/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Check which element has been clicked with jQuery
提问by user1391152
I am trying to use an 'if' statement to determine which element was clicked.
我正在尝试使用“if”语句来确定单击了哪个元素。
Basically I am trying to code something along the lines of:
基本上我试图编码一些东西：
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');
};
What is the proper jQuery syntax for this? Many thanks in advance.
什么是正确的 jQuery 语法？提前谢谢了。
回答by Oscar Jara
Use this, I think I can get your idea.
用这个，我想我能明白你的想法。
Live demo:http://jsfiddle.net/oscarj24/h722g/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
}
});?
回答by vpiTriumph
So you are doing this a bit backwards. Typically you'd do something like this:
所以你这样做有点倒退。通常你会做这样的事情：
?<div class='article'>
Article 1
</div>
<div class='article'>
Article 2
</div>
<div class='article'>
Article 3
</div>?
And then in your jQuery:
然后在你的 jQuery 中：
$('.article').click(function(){
article = $(this).text(); //$(this) is what you clicked!
});?
When I see things like #search-item .search-article, #search-item .search-article, and #search-item .search-articleI sense you are overspecifying your CSS which makes writing concise jQuery very difficult. This should be avoided if at all possible.
当我看到诸如#search-item .search-article、#search-item .search-article、 之类的东西时，#search-item .search-article我感觉到您过度指定了您的 CSS，这使得编写简洁的 jQuery 变得非常困难。如果可能的话，应该避免这种情况。
回答by Gene Bo
Answer from vpiTriumphlays out the details nicely.
Here's a small handy variation for when there are unique element ids for the data set you want to access:
vpiTriumph 的回答很好地列出了细节。
当您要访问的数据集具有唯一元素 ID 时，这是一个方便的小变化：
$('.news-article').click(function(event){
var id = event.target.id;
console.log('id = ' + id);
});
回答by scott.korin
The basis of jQuery is the ability to find items in the DOM through selectors, and then checking properties on those selectors. Read up on Selectors here:
jQuery 的基础是能够通过选择器在 DOM 中查找项目，然后检查这些选择器的属性。在此处阅读选择器：
http://api.jquery.com/category/selectors/
http://api.jquery.com/category/selectors/
However, it would make more sense to create event handlers for the click events for the different functionality that should occur based on what is clicked.
但是，为基于单击的内容应发生的不同功能的单击事件创建事件处理程序会更有意义。
回答by Volomike
Another option can be to utilize the tagNameproperty of the e.target. It doesn't apply exactly here, but let's say I have a class of something that's applied to either a DIVor an Atag, and I want to see if that class was clicked, and determine whether it was the DIVor the Athat was clicked. I can do something like:
另一种选择可以为利用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.');
}
});
回答by Yosep Tito
Hope this useful for you.
希望这对你有用。
$(document).click(function(e){
if ($('#news_gallery').on('clicked')) {
var article = $('#news-article .news-article');
}
});
回答by Stefan Fandler
$("#news_gallery li .over").click(function() {
article = $("#news-article .news-article");
});
