jquery - 触发colorbox时指定colorbox的href属性

Question

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

目前我的文档绑定功能中有这个：

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

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

Answer 1

如Colorbox Docs中所述

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

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

更新 可能更简单的解决方案 - 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
    });
});

Answer 2

你可以这样... 这种方法绕过插件的自动 onClick 处理。在确定要使用的 href 值之后，您可以在自己的事件中调用插件。

在下面的代码片段中，var myHref是静态的，但您可以编写一些 js来从您的数据源设置它。

顺便说一句，我认为您在 height 属性上有错字-重复的 % 符号？

<script>
        $(document).ready(function(){
            $('.button').click( function() {
                var myHref = "/someHREF";
                $.colorbox({
                    width: "50%", 
                    height: "50%", 
                    iframe: true, 
                    href: myHref, 
                    opacity: 0.6
                });             
            });
        });             
</script>