Pass ID to Lightbox

I'm trying to figure out how to pass the ID to my lightbox.  Based on the ID it will know which options to load in my lightbox, right now just filler.  But I need my ID to go from the html to my jquery code and know which lightbox to open.

html:
<a class="btn green" id="<?php echo $id?>">
Respond
</a>

Open in new window


jquery:
 $(document).ready(function() {
	
	$(".surveys ul li .btn").click(function(){
		
		$(".lightbox").fadeIn(300);
		$(".creative").fadeIn(300);
		
	});
	});

Open in new window


Lightbox:
<div class="creative survey-popup popup clearfix">
                <div class="display">
                    <div class="header">
                        <a class="logo"><img src="images/icon-samsung.png" alt="Samsung"/></a>
                        <h2>Creative Tone</h2>
                        <span>2 of 12</span>
                    </div>	
                    <div class="media">
                        <img src="images/img-creative.jpg" alt="Samsung">
                    </div>
                    <div class="footer">
                        <div class="question">
                            <span>How did this make you feel?</span>
                        </div>	
                    </div>		
                </div>	
                <div class="answers">
                    <div class="header">
                        <a class="close">close</a>
                    </div>
                    <div class="choose-one">
                        <h2>Select One</h2>
                        <ul>
                            <li>
                                <div class="radio">
                                    <input name="option1" type="radio" class="off"/>
                                    <a class="custom"></a>
                                </div>	
                                <div class="text">
                                    <label for="option1">choice a goes here</label>
                                </div>	
                            </li>	
                            <li>
                                <div class="radio">
                                    <input name="option2" type="radio" class="off"/>
                                    <a class="custom"></a>
                                </div>	
                                <div class="text">
                                    <label for="option2">choice b goes here</label>
                                </div>	
                            </li>	
                            <li>
                                <div class="radio">
                                    <input name="option3" type="radio" class="off"/>
                                    <a class="custom"></a>
                                </div>	
                                <div class="text">
                                    <label for="option3">choice c goes here</label>
                                </div>	
                            </li>	
                            <li>
                                <div class="radio">
                                    <input name="option4" type="radio" class="off"/>
                                    <a class="custom"></a>
                                </div>	
                                <div class="text">
                                    <label for="option4">choice d goes here</label>
                                </div>	
                            </li>	
                            <li>
                                <div class="radio">
                                    <input name="option5" type="radio" class="off"/>
                                    <a class="custom"></a>
                                </div>	
                                <div class="text">
                                    <label for="option5">choice e goes here</label>
                                </div>	
                            </li>	
                            <li>
                                <div class="radio">
                                    <input name="option6" type="radio" type="radio" class="off"/>
                                    <a class="custom"></a>
                                </div>	
                                <div class="text">
                                    <label for="option6">choice f goes here</label>
                                </div>	
                            </li>	
                        </ul>		
                    </div>
                    <div class="footer">
                        <a class="btn blue">Next <span></span></a>
                    </div>	
                </div>
            </div>	

Open in new window

LVL 12
Nathan RileyFounderAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Julian HansenCommented:
How do you mean send an ID to your lightbox?

How is your lightbox expecting to "receive" the ID?

Based on what you have posted

 $(document).ready(function() {
	
	$(".surveys ul li .btn").click(function(){
		// You can get the ID of the element clicked here like so
                var id = $(this).attr('id');

                // In terms of how you "pass" it to your lightbox - that depends on 
                // What you want to do with it. 
                
		$(".lightbox").fadeIn(300);
		$(".creative").fadeIn(300);
		
	});
	});

Open in new window

You need to be a bit more descriptive on this one
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
SAMIR BHOGAYTAFreelancer and IT ConsultantCommented:
hi.. you can do this like

jQuery(document).ready(function($) {
    $(".lightbox a").each(function() {
        $(this).click({param: this.id}, functionName);
    });
});

Open in new window


You could do this with on() as well:

jQuery(document).ready(function($) {
    $(".lightbox a").each(function() {
        $(this).on('click', {param: this.id}, functionName);
    });
});

Open in new window

0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
PHP

From novice to tech pro — start learning today.