use selectors in variable jquery

Question

i have to made functionality like this on click of a link it will show the product details in a popup like box this is using a big jquery code i didn't understand

and here is my jsfiddle i am trying to give some links same class with different #tags to show the div and i want that when i click on link it resolves the href value of the same and show the corresponding result but it didnt works can somebody suggest the right way here is my JS

$(".show").click(function() {
    var link = $('this').attr('href');
  $(link).show();

});

and html

<a href="#popup" id="show" class="show">a</a>
<a href="#popup1" id="show1" class="show">b</a>
<a href="#popup2" id="show2" class="show">c</a>

i want to show #popup on anchor click

full code on fiddle and i want this functionality

Answer 1

You should call $(this), not $('this')

• $(this) wraps the object referred to by this inside a jQuery object,
• $('this') will traverse all of your document looking for html nodes tagged this (much like $('div') will look for html nodes tagged div); since there isn't any, it will select an empty list of nodes.

Working fiddle : http://jsfiddle.net/Hg4zp/3/

( there also was a typo, calling .hide(") instead of .hide() )

Answer 2

Try this way:

$(".show").click(function (e) { //<-----pass the event here
   e.preventDefault(); //<--------------stop the default behavior of the link
   var link = $(this).attr('href'); //<-remove the quotes $(this)
   $(link).show();
});

$(".close").click(function () {
   $(this).closest("div.popupbox").hide(); //<----use .hide(); not .hide(");
});

You should use preventDefault() in these cases to stop the jump which take place when a link get clicked.