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

我正在使用Seadragon查看器创建图像库。我想在页面准备好后打开第一个图像。 守则：

  <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.openDzidzi，我需要首先单击一个图像来显示它。我怎样才能通过第一道天桥？ 谢谢你的帮助

更新：

---

我使用的是jquery-1.7.1。

我相信使用jquery，您可以在启动时点击第一个链接，如下所示：

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

<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>

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

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

<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>

顺便说一下，与上述内容无关，您可能想知道Seadragon的新版本：

---

亲爱的伊恩·吉尔曼，谢谢你的回答！不幸的是，这个脚本不起作用。此外，图片无法加载。顺便问一下，您使用的是什么版本的jquery？只是最新的jquery。这里有一个没有Seadragon部分的代码版本：它似乎做了正确的事情。Seadragon代码看起来也不错，但我不确定，因为现在我在OpenSeadragon上工作，API可能已经改变了。