Question

I have this:

<a href="#" id="article-2341234" class="article-link">click to see article</a>
<div id="article-body-2341234" style="display:none;"> ...
...
...
</div>

Now I want to do this:

1. prevent default
2. get articleid ‘2341234’ from the id of the link just clicked
3. hide the link and display the article below it

I also want to capture the recently clicked link in a variable as I will refer to it many times in the click event and I want to be effecient.

I have this so far:

$(".article-link").bind("click", function(e) {

e.preventDefault();
var articleId = ?????;

$("#article-link-" + articleId).hide();
$("#article-body-" + articleId).show();


});

I need a generic function that will get the ‘articleid’ from the ID of the element, how can I do this?

How can I store the recently clicked link in a variable so I can refer to it again. Is it:

$(this) ?

Answer 1

Easiest way would be to simply do a replace() on this.id to grab your article id.

$(".article-link").bind("click", function(e) {
  e.preventDefault();
  var articleId = this.id.replace("article-link-", "");
  $(this).hide();
  $("#article-body-" + articleId).show();
});

Side note, you can just do $(this).hide() instead of querying the dom again as this will refer to the dom element clicked.

Code example on jsfiddle