Question

我使用ColorBox作为灯箱库。我想用它来显示用PHP生成的动态内容的隐藏内容。

我在网站上采用这个例子（这是我需要的形式，在“内联”内容中）：

$(".example8").colorbox({width:"50%", inline:true, href:"#inline_example1"});

HTML：

<a class='example8' href="#">Inline HTML</a>

<div style="display:none">
<div id='inline_example1' style='padding:10px; background:#fff;'> 
    <p><strong>This content comes from a hidden element on this page.</strong></p>      
    <p><strong>If you try to open a new ColorBox while it is already open, it will update itself with the new content.</strong></p> 
    <p>Updating Content Example:<br /> 
    <a class="example5" href="../content/flash.html">Click here to load new content</a></p>   
</div>
</div>

但我无法添加（我没有看到其中的逻辑），就像在PHP中生成的内容的50个javascript定义一样。我的内容是这样生成的：

<div class="product" id="item-1">
    <h1><a href="javascript:;" class="product-description-load">Product name</a></h1>
    Price: 10€

    <div style="display:none">
        <div id="product-description-1">Hidden description for product 1</div>
    </div>
</div>

<div class="product" id="item-2">
    <h1><a href="javascript:;" class="product-description-load">Product name</a></h1>
    Price: 10€

    <div style="display:none">
        <div id="product-description-2">Hidden description for product 2</div>
    </div>
</div>

任何人都有关于如何使用所有产品只有一个功能的建议吗？

提前谢谢!!!

编辑：我不想重复50次是：

$("#item-1").colorbox({width:"50%", inline:true, href:"#product-description-1"});

因为我不知道我会有多少物品。

Answer 1

使用锚点的rel属性创建对内联内容的引用。

<div class="product" id="item-1">
    <h1><a href="javascript:;" rel="product-description-1" 
           class="product-description-load">Product name</a>
    </h1>
    Price: 10€

    <div style="display:none">
        <div class="product-description" id="product-description-1">
            Hidden description for product 1
        </div>
    </div>
</div>

然后基于类而不是id绑定colorbox，并使用自定义href函数：

$(document).ready(function() {
    $(".product-description-load").colorbox({
        width:"50%",
        inline: true,
        href: function() {
            var $element = $.colorbox.element();
            return $('div#' + $element.attr('rel')).parent().html();
        }
    });
});

http://jsfiddle.net/ce7a4/12/

的工作示例

Answer 2

这可能不是最好的方法。如果你这样做，你想在innerdiv上放一个类，所以第二个选择器可以是.innerdivclass而不是div：

$('.product').each(function() {
  $(this).colorbox({width:"50%", inline:true, href:'#' + $('div', this)[0].id});
});

使用jQuery Colorbox以更通用的方式获取动态内容

2 个答案: