Question

我有一些链接，根据他们在点击时会显示的内容，他们有不同的宽度和高度数据（此链接在服务器端生成），如：

<a class="inline" href="#inline-content-1" data-width="80%" data-height="80%">content 1</a>
<a class="inline" href="#inline-content-2" data-width="50%" data-height="80%">content 2</a>

现在我想使用类似的东西：

$('.inline').colorbox({inline:true, width:$(this).data('width'), height:$(this).data('height')});

但$(this).data('width')似乎在选项部分

中无效

Answer 1

您可以这样做：

<tr data-s=""></tr>
<tr data-s="1"></tr>
<tr data-s="2 1"></tr>
<tr data-s="3 2 1"></tr>

Answer 2

可以将Colorbox传递给要评估的函数来代替静态任何属性的价值。

$('.inline').colorbox({
     inline: true, 
     width: function(){ return $(this).data('width'); }, 
     height: function(){ return $(this).data('height'); }
});

Answer 3

最佳解决方案是使用data-cbox-前缀作为数据属性：

<a class="inline" href="#inline-content-1" data-cbox-width="80%" data-cbox-height="80%">content 1</a>
<a class="inline" href="#inline-content-2" data-cbox-width="50%" data-cbox-height="80%">content 2</a>

以data-cbox-开头的所有属性都将自动添加到选项中。

<强>演示

$('.inline').colorbox({inline: true});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.colorbox/1.6.4/jquery.colorbox-min.js"></script>

<a class="inline" href="#inline-content-1" data-cbox-width="80%" data-cbox-height="80%">content 1</a>
<a class="inline" href="#inline-content-2" data-cbox-width="50%" data-cbox-height="80%">content 2</a>

访问jQuery插件的options部分中的caller元素的属性

3 个答案: