Colorbox onload可以工作，但会压倒其他colorbox调用

Question

我正在尝试让colorbox在页面加载时加载内联超文本标记语言(inline_content_1)。我正在使用：

$(document).ready(function(){
   $(".inline").colorbox({inline:true, width:"440px"});
   $(".inline").colorbox({href:"#inline_content_1", open:true, width:"330px", height:"640px"});
});

然而，我在页面上还有其他4个内联colorbox调用，它们不需要在onload上工作：

<div id='inline_content-2'>...html...</div>
<div id='inline_content-3'>...html...</div>
<div id='inline_content-4'>...html...</div>
<div id='inline_content-5'>...html...</div>

正确的内联超文本标记语言(inline_content_1)会弹出onLoad，但是页面(inline_content_2,3,4,5)上的每个colorbox链接都会加载“inline _content_1”。

请帮帮忙？

谢谢!

Answer 1

现在，您正在使用选择器'#inline_content-1‘告诉所有具有'inline’类的元素。

试着这样做：

$(document).ready(function(){
   $(".inline").colorbox({inline:true, width:"440px"});
   $.colorbox({inline:true, href:"#inline_content_1", open:true, width:"330px", height:"640px"});
});

Answer 2

更改选择器以使用要在onload中出现的div的id

$(document).ready(function(){
    $(".inline #inline_content-1").colorbox({inline:true, width:"440px"});
    $(".inline #inline_content-1").colorbox({href:"#inline_content_1", open:true, width:"330px", height:"640px"});
});

感谢您抽出时间来考虑这个问题！我目前正在使用：

<link rel="stylesheet" href="/colorbox/colorbox.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="/colorbox/jquery.colorbox.js"></script>
<script>
    $(document).ready(function(){
        $(".inline").colorbox({inline:true, width:"440px"});
        $(".inline #inline_content_onload").colorbox({href:"#inline_content_onload", open:true, width:"330px", height:"640px"});
    });
</script>
<div style='display:none'>
    <div id='inline_content-1'> HTML here</div>
</div>
<div style='display:none'>
    <div id='inline_content-2'> HTML here</div>
</div>
<div style='display:none'>
    <div id='inline_content-3'> HTML here</div>
</div>
<div style='display:none'>
    <div id='inline_content-4'> HTML here</div>
</div>

<div style='display:none'>
    <div id='inline_content_onload'> HTML onload here</div>
</div>