Soy nuevo en StackOverflow y necesitaba ayuda con la siguiente pregunta de JavaScript, jQuery.
¿Hay una forma más concisa de codificar lo siguiente?:
jQuery(document).ready(function () { $("#article1").click(function(){ showarticleDescription(id=1); }) $("#article2").click(function(){ showarticleDescription(id=2); }) $("#article3").click(function(){ showarticleDescription(id=3); }) $("#article4").click(function(){ showarticleDescription(id=4); }) $("#article5").click(function(){ showarticleDescription(id=5); }) })Podemos usar el selector de inicios con CSS:
$('[id^="article"]').click(function() { showarticleDescription(+this.id.substr(this.id.length - 1)); });Sin embargo, sería mejor aplicar una clase común aquí (y posiblemente usar un atributo personalizado). En el HTML puedes hacer algo como:
<div data-article="1" class="article">...</div> <div data-article="2" class="article">...</div> <div data-article="3" class="article">...</div> $("article").click(function() { const article = +$(this).data("article"); showarticleDescription(article); });Agregue clases y atributos de datos a sus elementos (en lugar de confiar en los identificadores) y use la delegación de eventos para capturar los eventos de clic a medida que "hacen burbujas" en el DOM y luego llame a la función.
function showarticleDescription() { console.log($(this).data('id')) } $(document).ready(function () { $(document).on('click', '.article', showarticleDescription); }); .article:hover { cursor: pointer; color: red; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div data-id="1" class="article">One</div> <div data-id="2" class="article">Two</div> <div data-id="3" class="article">Three</div>