触发colorbox时指定colorbox的href属性

Question

是否可以在单击触发 colorbox 的实际按钮时指定 colorbox 的目标 URL。

目前我的文档绑定函数中有这个：

$(function () {
    $(".button").colorbox({ width: "50%", height: "50%%", iframe: true, href: "/abc", opacity: 0.6 });
});

但是，href 属性取决于我第一次将 colorbox 绑定到按钮时不知道的下拉列表的值。

Answer 1

如Colorbox Docs 中所述

你可以设置回调“onOpen”（也可能是“onLoad”），它应该在颜色框开始加载目标中指定的内容之前触发，让你有机会修改它

$(function () {
    $(".button").colorbox({ 
        width: "50%", 
        height: "50%%", 
        iframe: true, 
        href: "/abc", 
        opacity: 0.6,
        onOpen: function(){
          // modify target here
        }
    });
});

UPDATE 可能更简单的解决方案 - colorbox 允许使用函数而不是静态值

$(function () {
    $(".button").colorbox({ 
        width: "50%", 
        height: "50%", 
        iframe: true, 
        href: function(){
            // Since I can't see your markup I can't provide exact solution
            // but if your .button elm is an anchor then use
            var url = $(this).attr('href');
            // if you are obtaining the url from diff. elm, grab it from there
            // such as $('#your_element).attr('href') 
            return url;
        }, 
        opacity: 0.6
    });
});