jQuery：fancyBox多次使用href？

发布于 2024-10-08 12:41:11 字数 1167 浏览 2 评论 0原文

我有这个：

<script>
$(document).ready(function() {
    $("a#a_test").fancybox({
        titleShow     : false,
        width:    400,
        height:   120,
        autoDimensions: false,
        overlayOpacity: 0.6,
        href: 'test.php' 
    }); 
});
</script>
<a href="#test" id="a_test">test</a>

这很好用。

现在我想在循环中使用它（在 php 中），我想知道是否需要始终包含这些设置。

每个设置中的不同之处在于名称（因此它将是 a_test1、a_test2 等）和 href（因此它将是 test.php?id=1、test.php?id=2 等）。

我知道我只能复制粘贴，但是当我查看html时，这会是一种草率的代码，一堆准备好的文档，a#a_test123，a#a_test2，a#test_3设置，我不能只使用一个设置，然后添加循环 ID 的编号（例如 1、2、3）。类似的东西：

<script>
$(document).ready(function() {
    $("a#a_test<?php echo $number; ?>").fancybox({
        titleShow     : false,
        width:    400,
        height:   120,
        autoDimensions: false,
        overlayOpacity: 0.6,
        href: 'test.php?id=<?php echo $number; ?>'
    }); 
});
</script>

如果我在一个函数中创建它并每次调用它，例如 getFancy(1)、getFancy(2)..，这也可以工作，但是如果您查看输出，它仍然看起来并且是马虎编码html，一堆准备好 diff 的文档。设置。

那么有没有一种解决方案可以更智能、更简单地做到这一点呢？所以它为所有盒子提供了一个全局设置。

谢谢大家的转发

原文

I have this:

<script>
$(document).ready(function() {
    $("a#a_test").fancybox({
        titleShow     : false,
        width:    400,
        height:   120,
        autoDimensions: false,
        overlayOpacity: 0.6,
        href: 'test.php' 
    }); 
});
</script>
<a href="#test" id="a_test">test</a>

This works fine.

Now i want to use this in a loop (in php), I am wondering if i need to include the settings all the time.

What will be different in each setting is the name(so it would be a_test1, a_test2, and so on) and the href (so it would be test.php?id=1, test.php?id=2 and so on).

I know i just can copy paste but it would be kind of sloppy code when i view the html, a bunch of document ready, a#a_test123, a#a_test2, a#test_3 settings, couldnt I just go with one setting, and then add the number of the loop id(e.g 1,2,3) to it. Something like:

<script>
$(document).ready(function() {
    $("a#a_test<?php echo $number; ?>").fancybox({
        titleShow     : false,
        width:    400,
        height:   120,
        autoDimensions: false,
        overlayOpacity: 0.6,
        href: 'test.php?id=<?php echo $number; ?>'
    }); 
});
</script>

This would work too, if I made it in a function and call it each time e.g getFancy(1), getFancy(2).. but then it would still look and be slopp coding if you take a look in the output html, a bunch of document ready with diff. settings.

So is there a solution to do this smarter and simpler? So it gets something like a global setting for all the boxes.

Thank you a bunch in forward

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

忆伤 2024-10-15 12:41:11

<script>
$(document).ready(function() {
    $("a.fancybox_vid").each(function(){
       $(this).fancybox({
        titleShow     : false,
        width:    400,
        height:   120,
        autoDimensions: false,
        overlayOpacity: 0.6,
        href: 'test.php?id='+$(this).attr('rel')
      }); 
    });
});
</script>

<a class='fancybox_vid'  rel='1'>video</a>
<a class='fancybox_vid'  rel='2'>video</a>

<script>
$(document).ready(function() {
    $("a.fancybox_vid").each(function(){
       $(this).fancybox({
        titleShow     : false,
        width:    400,
        height:   120,
        autoDimensions: false,
        overlayOpacity: 0.6,
        href: 'test.php?id='+$(this).attr('rel')
      }); 
    });
});
</script>

<a class='fancybox_vid'  rel='1'>video</a>
<a class='fancybox_vid'  rel='2'>video</a>

回复收藏 0 原文

~没有更多了~