javascript - 单击链接并使用 Javascript 在页面的另一部分中查看

Question

我有一个问题，如何在单击其中一个链接时查看我想要的数据。如何获取动态id来触发数据。

下面是我点击 Shay, Linn 时的图像。 2015 ..... 在元数据部分，它将在详细信息部分动态显示详细信息。

这是我的代码:

<td><a href="">Shay, Lynn. 2015. Tropical Cyclone Issac Ocean Profiles from 16 August 2012. Deepsea to Coast Connectivity in the Eastern Gulf of Mexico (DEEP-C). </a></td>

下面是我的详细信息部分的代码

<div class="panel-body">
            <p align="justify"><strong>Dataset Title:</strong> Tropical Cyclone Issac Ocean Profiles from 16 August 2012</p>
            <p align="justify"><strong>File Identifier:</strong> R1.x138.077:0015</p>
            <p align="justify"><strong>Dataset Originator:</strong> Shay, Lynn</p>
            <p align="justify"><strong>Point of Contact:</strong> Shay, Lynn (nshay@rsmas.miami.edu) </p>
            <p align="justify"><strong>Abstract:</strong> <br />A flight on NOAA's WP-3D Orion aircraft was conducted during tropical cyclone Isaac on 16 August 2012 over the northeastern Gulf of Mexico (from approximately 24 to 29 N and 84 to 90 W), over the Loop Current (LC) and associated frontal eddies. Airborne expendable probes measured atmospheric and oceanic parameters.</p>
            <br />
            <a class="btn btn-success btn-xs" href="metaservice#">Metaservice</a>
        </div>

我怎样才能做到这一点？先谢谢了

Answer 1

要仅使用 javascript 和 html 简单地解决此问题，您需要将所有信息打印到页面，并在需要时显示/隐藏相关详细信息。

我的 html 有一个 .panel-body div 为每个细节。请注意，它们每个都有唯一的 ID。这些默认情况下隐藏在 css 中。我还为元数据中的每个链接(您可能希望更好地设计样式)提供了唯一的 data-id属性(1 和 2)，我还给了它们 metalink 类这样我就可以在 javascript 中轻松引用它们。我将详细信息面板缩小了一些，以便于阅读。

我的 JavaScript 获取了所有 metalink s 并通过在 for 循环中运行它们来将单击处理程序绑定(bind)到每个单击处理程序。然后转到 showDetail(id) 方法，该方法隐藏所有详细信息面板，然后显示具有我们从单击事件传递的 id 的面板。可能有一种更优雅的方法可以通过检查每次迭代中的每个 div 来确定是否显示它，但这也有效。

我已经添加了 JSFiddle通过一些快速而肮脏的样式来查看其实际效果。

HTML:

  <div id="metadata">
    <h1>Metadata</h1>
    <table>
      <tr>
        <th>Metadata</th>
        <th>Download</th>
      </tr>
      <tr>
        <td><a href="#" class="metalink" data-id="1">11111111111111111</a></td>
        <td>Download</td>
      </tr>
      <tr>
        <td><a href="#" class="metalink" data-id="2">22222222222222222</a></td>
        <td>Download</td>
      </tr>
    </table>
  </div>

  <div id="detail">
    <h1>Detail</h1>

    <div id="panel-1" class="panel-body">
      <p align="justify">Details for 111111111</p>
    </div>

    <div id="panel-2" class="panel-body">
      <p align="justify">Details for 22222222</p>
    </div>
  </div>

JS:

var metalinks = document.getElementsByClassName("metalink");
  for (var i=0; i < metalinks.length; i++) {
    metalinks[i].onclick = function(e){
      e.preventDefault();
      showDetail(this.dataset.id);
    };
}

function showDetail(id)
{
  var detailsPanels = document.getElementsByClassName("panel-body");
  for (var j=0; j < detailsPanels.length; j++) {
    detailsPanels[j].style.display = "none";
  }
  var detailPanel = document.getElementById("panel-" + id);
  detailPanel.style.display = "block";
}