fancybox open relative div

时间:2011-03-21 21:27:07

标签: jquery html fancybox

我正在试图弄清楚如何在点击的链接中打开fancybox中的div。

<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>

我知道我可以将#uniqueDiv添加到a,然后添加ID为uniqueDiv的div,但是我希望在点击链接时,它会打开最近的div班help

我试过这样的事情没有运气:

$('.more-info a').click(function(e){
    $(this).parent().next().fancybox();
    e.preventDefault();
});

非常感谢任何帮助。

-Ryan

1 个答案:

答案 0 :(得分:0)

我再考虑这个问题几个小时,并决定采用不同的方法,因为我几乎走到了尽头。我想如果我无法定位相对div,那么我可以自动分配hrefid值,这样每个链接都可以通过其ID进行定位。

这实际上很漂亮,符合我的所有要求:

$('.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();
  1. $('.more-info a').each(function(index){我定位所有链接并循环显示它们。
  2. var x = index + 1;索引从0开始,但为了便于阅读,我从1开始。
  3. $(this).attr('href', '#box' + x);我获取当前链接的href值(当前为#)并将其替换为#box[INDEX],其中index是唯一的自动递增数字。
  4. var li = $(this).parent().parent();我移回了一个视图元素,这样我就可以磨练我隐藏的div .help
  5. $('.help', li).attr('id', 'box' + x);我现在定位.help div并添加一个名为id的属性并将其设置为box[INDEX]。我现在在链接和隐藏div之间有必要的关联,这样fancybox就可以发挥它的魔力。
  6. }).fancybox();这让fancybox知道打开我的链接。
  7. 使用的jQuery函数: .each().attr().parent()

    仍然赞赏任何建议或改进。

    -Ryan