Verificar con qué elemento se ha hecho clic con jQuery

Question

Estoy intentando usar una instrucción 'if' para determinar en qué elemento se hizo clic.

Básicamente estoy tratando de codificar algo en la línea de:

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

¿Cuál es la sintaxis correcta jQuery para esto? Muchas gracias de antemano.

Answer 1

Usa esto, creo que puedo hacerte una idea.

Demostración en directo: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

La base de jQuery es la capacidad de buscar elementos en el DOM a través de selectores y propiedades a continuación, la comprobación de los selectores. Lea sobre los selectores aquí:

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

Sin embargo, tendría más sentido crear controladores de eventos para los eventos de clic de las diferentes funcionalidades que debe ocurrir en base a lo que se ha hecho clic.

Answer 4

Así que estás haciendo esto un poco al revés. Normalmente, usted haría algo como esto:

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

Y luego, en su jQuery:

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

Cuando veo cosas como #search-item .search-article, #search-item .search-article y #search-item .search-article tengo la sensación de que está overspecifying el CSS que hace que la escritura conciso jQuery muy difícil. Esto debería evitarse si es posible.

Answer 5

Hope esto útil para usted.

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

Answer 6

Answer from vpiTriumph presenta los detalles muy bien.
Aquí hay una pequeña variación útil para cuando hay identificadores de elemento único para el conjunto de datos que desea acceder:

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

Answer 7

Otra opción puede ser utilizar la propiedad tagName del e.target. No se aplica exactamente aquí, pero digamos que tengo una clase de algo que se aplica a una etiqueta DIV o A, y quiero ver si se hizo clic en esa clase y determinar si fue DIV o A que fue hecho clic. Puedo hacer algo como:

$('.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.'); 
    } 
});