Question

我正在调用一个函数来从灯箱中的json字符串中写入内容。当我使用以下

时，我的功能正在工作并填充灯箱

<a data-featherlight="<div id='dataplan_list_container'><table id='dataplan_list'></table></div>" onclick="dataPlanOutput('FR');" data-target="data_plan">France</a>

但是我不希望每个链接都包含

data-featherlight="<div id='dataplan_list_container'><table id='dataplan_list'></table></div>"

我尝试使用

在页面上创建目标div

<a data-featherlight="#dataplan_list_container" onclick="dataPlanOutput('FR');" data-target="data_plan">France</a>
<div id='dataplan_list_container'><table id='dataplan_list'></table></div>

但是当我第一次点击链接时使用它时，灯箱会加载空白。

我可以在javascript中设置模板并在点击时动态调用吗？

Answer 1

您是否在$(document).ready()上使用了ligthbox，以便加载所有DOM内容？如果没有，那么考虑使用它。

您还可以manually bind指向所需内容的所有链接：

＆＃13;

function dataPlanOutput(loc) {}

$('a.fl').featherlight({
    targetAttr: 'href'
});

＆＃13;

body>#dataplan_list_container {
  display:none
}
#dataplan_list_container {
  width: 200px;
  height: 100px;
}
#dataplan_list {
  margin: 10px;
  width: 180px;
  height: 90px;
  background: repeating-linear-gradient(45deg, #606dbc, #606dbc 10px, #465298 10px, #465298 20px);
}

＆＃13;

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdn.rawgit.com/noelboss/featherlight/1.6.1/release/featherlight.min.js"></script>
<link type="text/css" rel="stylesheet" href="//cdn.rawgit.com/noelboss/featherlight/1.6.1/release/featherlight.min.css" />


<a class="fl" href="#dataplan_list_container" onclick="dataPlanOutput('FR');" data-target="data_plan">France</a><br>
<a class="fl" href="#dataplan_list_container" onclick="dataPlanOutput('RU');" data-target="data_plan">Russia</a><br>
<div id='dataplan_list_container'><table id='dataplan_list'></table></div>

＆＃13;

带有api内容的jQuery Featherlight，第二次点击时加载

1 个答案: