How to make a JavaScript function more concise?

Question

I'm new to StackOverflow and needed some help with the following JavaScript, jQuery question.

Is there a more concise way to code the following?:

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

Why in the world are you doing showarticleDescription(id=1) (or any other number)? While this isn't invalid syntax, this isn't Python either and there isn't any key value thing going on here; the closest thing you'll get are objects. — code
– code, Commented Mar 3, 2022 at 5:27
Also I'm passing the id value to the function and after assigning it to the variable, I am also using it in the lines of code that follow. Hence, id=1. — Jenny Hillary D'cruz
– Jenny Hillary D'cruz, Commented Mar 3, 2022 at 19:38

code · Accepted Answer · 2022-03-03 05:35:56Z

1

We can use the starts with CSS selector:

$('[id^="article"]').click(function() {
  showarticleDescription(+this.id.substr(this.id.length - 1));
});

It'd be better though to apply a common class here (and possibly use a custom attribute). In the HTML you can do something like:

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

edited Mar 3, 2022 at 5:35

answered Mar 3, 2022 at 5:30

code

6,3994 gold badges22 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Andy · Accepted Answer · 2022-03-03 05:34:10Z

0

Add classes and data attributes to your elements (rather than relying on ids) and use event delegation to capture the click events as they "bubble up" the DOM, and then call the function.

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>

answered Mar 3, 2022 at 5:34

Andy

63.6k13 gold badges72 silver badges99 bronze badges

Collectives™ on Stack Overflow

How to make a JavaScript function more concise?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related