CODEWITHSUNDEEP
javascriptjqueryhtmlpopup
Sam Skirrow
Sam Skirrow

Reputation: 3697

jQuery show unique popup for each link clicked

I have a series of links on my page, each link has a unique id: library_vid_link-UNIQUE_ID. When clicked, I want to show a popup which shows information unique to that link.

For each link, I have a hidden popup, which, when clicked, the popup is displayed. The popup also has a unique id: less_preview_popup-UNIQUE_ID (the unique id for the link and popup both match).

Here is a sample of my html code:

<a href="#" class="library_vid_link" id="library_vid_link-801">CLICK HERE FOR MORE INFO
</a>

<div class="lesson_preview_popup" id="lesson_preview_popup-801">
    THIS IS THE POPUP
</div>

<a href="#" class="library_vid_link" id="library_vid_link-802">CLICK HERE FOR MORE INFO
</a>

<div class="lesson_preview_popup" id="lesson_preview_popup-802">
    THIS IS THE POPUP 2
</div>

Here is the jquery i'm currently using:

jQuery('.library_vid_link').click(function( event ) {
    event.preventDefault();
    $('.lesson_preview_popup').css('top', '25%');
    $('body').addClass('no-scroll'); 
});

The issue I'm having is that when I click on a link, ALL the popups show, not just the one that relates to the link clicked. Is there a way to target the popup that belongs to the link clicked?

Upvotes: 1

Views: 250

Answers (3)

mplungjan
mplungjan

Reputation: 177860

Use the data-attribute: 

<a data-popup="lesson_preview_popup_801" ....

And

$("#"+$(this).data("popup")).show().css('top', '25%');

Using $(this).next() instead, assumes that the div to show is the next sibling of the link

Upvotes: 2

Mohammad
Mohammad

Reputation: 21489

Jquery .next() select next sibling of element. Use it like bottom example

$('.library_vid_link').click(function( event ) {
    event.preventDefault();
    $(this).next().show().css('top', '25%');
    $('body').addClass('no-scroll'); 
});


$('.library_vid_link').click(function( event ) {
    //event.preventDefault();
    $(this).next().show().css('top', '25%');
    //$('body').addClass('no-scroll'); 
});
.lesson_preview_popup {
    display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" class="library_vid_link" id="library_vid_link-801">CLICK HERE FOR MORE INFO
</a>
<div class="lesson_preview_popup" id="lesson_preview_popup-801">
    THIS IS THE POPUP
</div>
<a href="#" class="library_vid_link" id="library_vid_link-802">CLICK HERE FOR MORE INFO
</a>
<div class="lesson_preview_popup" id="lesson_preview_popup-802">
    THIS IS THE POPUP 2
</div>

Upvotes: 0

user6269864
user6269864

Reputation:

Change this:

$('.lesson_preview_popup').css('top', '25%');

into this:

$(this).next().css('top', '25%');

Alternatively, save the ID (e.g. 801) in a new attribute, like this: 

<a data-id="801" ...

Then, call the popup like this: 

jQuery('.library_vid_link').click(function( event ) {
    event.preventDefault();
    var thisId = $(this).attr("data-id"); //get "801"
    $('#lesson_preview_popup-' + thisId).css('top', '25%'); //construct the ID and call the popup by its ID
    $('body').addClass('no-scroll'); 
});

Upvotes: 0

Related Questions