fancybox open relative div
I'm trying to figure out how to open a div in fancybox relatively from the link that was clicked.
<div class="tool">
<ul>
<li><span class="more-info"><a href="#" title="View more info">?</a></span>
<div class="help">This is the help text</div>
</li>
</ul>
</div>
I know I can add something like #uniqueDiv
to a
and then a div with id uniqueDiv
, however I would prefer that when the link is clicked, it opens the closest div with clas开发者_JAVA技巧s help
.
I tried something like this with no luck:
$('.more-info a').click(function(e){
$(this).parent().next().fancybox();
e.preventDefault();
});
Any help would be much appreciated.
-Ryan
I thought about this problem for a few more hours and decided to approach it differently, since I was pretty much at a dead end. I was thinking that if I can't target a relative div, maybe I can then auto-assign the href
and id
values, so each link can then be targeted via its id.
This actually worked out beautifully and meets all my requirements:
$('.more-info a').each(function(index){
var x = index + 1;
$(this).attr('href', '#box' + x);
var li = $(this).parent().parent();
$('.help', li).attr('id', 'box' + x);
}).fancybox();
$('.more-info a').each(function(index){
I target all my links and loop through them.var x = index + 1;
The index starts at 0, but for readability, I start it at 1.$(this).attr('href', '#box' + x);
I take the current link'shref
value (currently#
) and replace it with#box[INDEX]
where index is a unique, auto-incrementing number.var li = $(this).parent().parent();
I move back a view elements so I can hone in on my hidden div.help
.$('.help', li).attr('id', 'box' + x);
I now target the.help
div and add an attribute calledid
and set it tobox[INDEX]
. I now have the necessary association between link and hidden div so that fancybox can do its magic.}).fancybox();
This lets fancybox know to open my links with it.
jQuery functions used: .each(), .attr(), .parent()
Any suggestions or improvements are still appreciated.
-Ryan
精彩评论