/    Sign up×
Community /Pin to ProfileBookmark

total JS n00b – how to writing & referencing variables

Copy linkTweet thisAlerts:
Apr 12.2012

I am new to JS and would like to know how to rewrite the code below to allow for more than one link.This uses the JQuery Reveal by Zurb and works great for one link to pop a modal window containing a video.

I don’t know how to write or reference a JS variable. I know that this can be passed from the link into the function to then target different “modal” divs but don’t understand how to read that value (video1 opens modal1, video2 opens modal2, etc).

I’d like to understand this basic concept so I can apply it to other JavaScript.

Thanks!

It has a text link: <a href=”#” id=”video1″>my link</a>

a hidden div: <div id=”modal”> . . . containing a video

and this JS:

[code=php]$(document).ready(function() {
$(‘#video1’).click(function(e) { // Button activating modal
$(‘#modal’).reveal({ // item to be opened
animation: ‘fade’, // for reveal.js
animationspeed: 600,
closeonbackgroundclick: true,
});
return false;
});
});[/code]

to post a comment
JavaScript

3 Comments(s) ↴

Copy linkTweet thisAlerts:
@PadonakApr 12.2012 — if you have several links:

[CODE]<a href="#" id="video_1">my link 1</a>
<a href="#" id="video_2">my link 2</a>
<a href="#" id="video_3">my link 3</a>
..etc.[/CODE]

and several hidden divs:

[CODE]
<div id="modal_1"> . . .</div>
<div id="modal_2"> . . .</div>
<div id="modal_3"> . . .</div>[/CODE]

you can change the function this way:

[CODE]$(document).ready(function() {
$('a[id*=video_]').click(function(e){
var id = $(this).attr('id');
var target_div_id = 'modal_' + id.substring(id.indexOf('_')+1,id.length);
$('#'+target_div_id).reveal({ // item to be opened
animation: 'fade', // for reveal.js
animationspeed: 600,
closeonbackgroundclick: true,
});
return false;
});
});[/CODE]
Copy linkTweet thisAlerts:
@subQuarkauthorApr 12.2012 — Wow! Very eloquently done and I would have never figured out the indexing part of it! I see you created a variable and it makes sense when I read your code, understanding it is another matter!

Thank you very much, I appreciate your expertise. =)
Copy linkTweet thisAlerts:
@PadonakApr 12.2012 — good to hear ))
×

Success!

Help @subQuark spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.28,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...