Question

i have the following jQuery code:

$(document).ready(function() {
    $('#showContent').click(function(e) {
        e.preventDefault();
        $("body").append("<div id='lyricsOverlay'></div>");
        $("#lyricsOverlay").height($(document).height()); 
        $('#lyrics').show();
        $('#lyricsOverlay').click(function() { 
            $('#lyrics').hide();
            $('#lyricsOverlay').remove();
        });
    });
})

Which shows an overlayed div, with the rest of the page blurred.

Works perfectly with:

<a href="#" id="showContent">Lyrics...</a>

My problem:

Inside the page I have many links which I want to behave just like first one. So, how can I implement something like:

<a href="#" id="showContent0">Lyrics...</a>
<a href="#" id="showContent1">Lyrics...</a>
...

And make the two or more of them work?

Something like:

**i = GET i from the link?** 
$('#showContent.**i**').click(function(e) {

This works partially, allows opening, but prevents overlay from closing ever again…

$((this)).click(function(e) {

Obviously the sintax above is not correct, I have no idea on how to do it…

Thanks!!

Answer 1

You do it this way:

$('[id^=showContent]')

This will select all elements which id begins with showContent.