获取第一个子函数的onclick并传递给函数

Question

我正在使用sedragon查看器的图像库。我想在页面准备好时打开第一个图像。代码:

  <div class="all-facs">
    <a onclick="switchTo(event, '55/dzc_output_images/55_A_1.xml');"
  href="#">
  <img src="55/dzc_output_images/55_A_1_files/7/0_0.jpg"/>
</a>
    <a onclick="switchTo(event, '55/dzc_output_images/55_A_2.xml');"
  href="#">
  <img src="55/dzc_output_images/55_A_2_files/7/0_0.jpg"/>
  </a>
  <div id="containerSeadragon">
  <script type="text/javascript">
                var viewer = null;
                function init() {
                viewer = new Seadragon.Viewer("containerSeadragon");
                viewer.openDzi(dzi);
                }
                function switchTo(event, dzi) {
                if (dzi) {
                viewer.openDzi(dzi);
                } else {
                viewer.close();
                }
                // don't let the browser handle the link
                Seadragon.Utils.cancelEvent(event);   
                }
                Seadragon.Utils.addEvent(window, "load", init);
            </script>
  </div>

现在我只是把dzi传递给viewer.openDzi(dzi)，我需要首先点击一个图像来显示它。我怎样才能通过第一个a的dzi ?谢谢你的帮助!

更新:我使用jquery-1.7.1.

Answer 1

我相信使用jQuery可以在启动时触发第一个链接的点击，就像这样:

$('.all-facs a').eq(0).trigger('click');

也许更健壮的解决方案是将DZI信息作为数据属性附加到a标记上，如下所示:

<div class="all-facs">
<a data-dzi="55/dzc_output_images/55_A_1.xml" href="#">
<img src="55/dzc_output_images/55_A_1_files/7/0_0.jpg"/>
</a>
<a data-dzi="55/dzc_output_images/55_A_2.xml" href="#">
<img src="55/dzc_output_images/55_A_2_files/7/0_0.jpg"/>
</a>
<div id="containerSeadragon">
<script type="text/javascript">
  var viewer = null;
  function init() {
    viewer = new Seadragon.Viewer("containerSeadragon");
    switchTo($('.all-facs a').eq(0).data('dzi'));
    $('.all-facs a').click(function(event) {
      switchTo($(event.target).data('dzi'));
    });
  }
  function switchTo(dzi) {
  if (dzi) {
    viewer.openDzi(dzi);
  } else {
    viewer.close();
  }
  // don't let the browser handle the link
  Seadragon.Utils.cancelEvent(event);   
  }
  Seadragon.Utils.addEvent(window, "load", init);
</script>
</div>

顺便说一下，与上面无关，你可能想知道有一个新版本的seaddragon:

http://openseadragon.github.io/