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、、のようなものを見ると、CSSを過剰に指定しているため、簡潔なjQueryを作成するのが非常に困難になっていると感じます#search-item .search-article。#search-item .search-articleこれは、可能な限り避ける必要があります。

Answer 3

vpiTriumphからの回答は、詳細をうまくレイアウトしています。
アクセスするデータセットに一意の要素IDがある場合の便利なバリエーションを次に示します。

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

Answer 4

tagName別のオプションは、のプロパティを利用することe.targetです。ここでは正確には当てはまりませんが、aDIVまたはAtagのいずれかに適用されるクラスがあり、そのクラスがクリックされたかどうかを確認し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");
});