javascript - 获取Json数据并在分割窗口onclick html上显示

Question

我有以下 html 代码，它在左侧 Pane 中显示父子列表。我想在 onclick 期间格式化与每个项目对应的 json 数据，并在右侧 Pane 中显示相同的数据。

但是即使我点击 child ，这也只显示 parent 的数据。

以下是html代码:

function getDetails(dom) {
  var jsonDataInString = dom.getAttribute("data-json"),
    jsonData = JSON.parse(jsonDataInString),
    ServiceElement = document.getElementById("Service"),
    PortElement = document.getElementById("Port"),
    NumberOfProcessElement = document.getElementById("NumberOfProcess"),
    HostsElement = document.getElementById("Hosts");

  if (jsonData) {
    ServiceElement.innerText = jsonData.Service;
    PortElement.innerText = jsonData.Port;
    NumberOfProcessElement.innerText = jsonData.NumberOfProcess;
    Hosts.innerText = jsonData.Hosts;
  }
}

.tree li {
  margin: 0px 0;
  list-style-type: none;
  position: relative;
  padding: 20px 5px 0px 5px;
}

.tree li::before {
  content: '';
  position: absolute;
  top: 0;
  width: 1px;
  height: 100%;
  right: auto;
  left: -20px;
  border-left: 1px solid #ccc;
  bottom: 50px;
}

.tree li::after {
  content: '';
  position: absolute;
  top: 30px;
  width: 25px;
  height: 20px;
  right: auto;
  left: -20px;
  border-top: 1px solid #ccc;
}

.tree>ul>li::before,
.tree>ul>li::after {
  border: 0;
}

.tree li:last-child::before {
  height: 30px;
}

.tree li r {
  border: 1px solid #080808;
  padding: 5px 10px;
  text-decoration: none;
  color: #666;
  font-family: arial, verdana, tahoma;
  font-size: 11px;
  display: inline-block;
  word-wrap: break-word;
  background-color: Tomato;
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
}

.tree li g {
  border: 1px solid #080808;
  padding: 5px 10px;
  text-decoration: none;
  color: #666;
  font-family: arial, verdana, tahoma;
  font-size: 11px;
  display: inline-block;
  word-wrap: break-word;
  background-color: LightGreen;
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
}

.split {
  height: 100%;
  width: 50%;
  position: fixed;
  z-index: 1;
  top: 0;
  overflow-x: hidden;
  padding-top: 20px;
}

.left {
  left: 0;
  background-color: white;
}

.right {
  right: 0;
  background-color: #ccc;
  word-wrap: break-word;
}

<div class="split left">
  <div class="tree" id="tree">
    <ul>
      <li onclick="getDetails(this)" data-json='{"Service":"ParentService","Hosts":"[\"parent.dev.com\"]","NumberOfProcess":"5","Port":"15080"}'>
        <g href="#">ParentService</g>
        <ul>
          <li onclick="getDetails(this)" data-json='{"Service":"ChildService","Hosts":"[\"child1.dev.com\"]","Port":"14758"}'>
            <g href="#">child1</g>
          </li>

          <li onclick="getDetails(this)" data-json='{"Service":"ChildService","Hosts":"[\"child2.dev.com\"]"}'>
            <r href="#">child2</r>
          </li>

          <li onclick="getDetails(this)" data-json='{"Service":"ChildService","Hosts":"[\"child3.dev.com\"]"}'>
            <r href="#">child3</r>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</div>


<div class="split right">
  <label for="Service"><b>Service:</b> </label>
  <span id="Service"></span>
  <br>
  <label for="Port"><b>Port:</b> </label>
  <span id="Port"></span>
  <br>
  <label for="NumberOfProcess"><b>Number Of Process:</b> </label>
  <span id="NumberOfProcess"></span>
  <br>
  <label for="Hosts"><b>Hosts:</b> </label>
  <span id="Hosts"></span>
</div>

Answer 1

您需要停止传播。每当您单击子级时，您的点击都会传播到父级

这是一个不引人注目的版本

function getDetails(e) {
  e.stopPropagation(); // cancel the event bubble
  var jsonDataInString = this.getAttribute("data-json"),
    jsonData = JSON.parse(jsonDataInString),
    ServiceElement = document.getElementById("Service"),
    PortElement = document.getElementById("Port"),
    NumberOfProcessElement = document.getElementById("NumberOfProcess"),
    HostsElement = document.getElementById("Hosts");
  if (jsonData) {
    ServiceElement.innerText = jsonData.Service || "Not available";
    PortElement.innerText = jsonData.Port || "Not available";
    NumberOfProcessElement.innerText = jsonData.NumberOfProcess || "Not available";
    Hosts.innerText = jsonData.Hosts || "Not available";
  }
}
document.querySelectorAll("[data-json]").forEach(function(el) {
  el.addEventListener("click",getDetails,false);
});

.tree li {
  margin: 0px 0;
  list-style-type: none;
  position: relative;
  padding: 20px 5px 0px 5px;
}

.tree li::before {
  content: '';
  position: absolute;
  top: 0;
  width: 1px;
  height: 100%;
  right: auto;
  left: -20px;
  border-left: 1px solid #ccc;
  bottom: 50px;
}

.tree li::after {
  content: '';
  position: absolute;
  top: 30px;
  width: 25px;
  height: 20px;
  right: auto;
  left: -20px;
  border-top: 1px solid #ccc;
}

.tree>ul>li::before,
.tree>ul>li::after {
  border: 0;
}

.tree li:last-child::before {
  height: 30px;
}

.tree li r {
  border: 1px solid #080808;
  padding: 5px 10px;
  text-decoration: none;
  color: #666;
  font-family: arial, verdana, tahoma;
  font-size: 11px;
  display: inline-block;
  word-wrap: break-word;
  background-color: Tomato;
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
}

.tree li g {
  border: 1px solid #080808;
  padding: 5px 10px;
  text-decoration: none;
  color: #666;
  font-family: arial, verdana, tahoma;
  font-size: 11px;
  display: inline-block;
  word-wrap: break-word;
  background-color: LightGreen;
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
}

.split {
  height: 100%;
  width: 50%;
  position: fixed;
  z-index: 1;
  top: 0;
  overflow-x: hidden;
  padding-top: 20px;
}

.left {
  left: 0;
  background-color: white;
}

.right {
  right: 0;
  background-color: #ccc;
  word-wrap: break-word;
}

<div class="split left">
  <div class="tree" id="tree">
    <ul>
      <li data-json='{"Service":"ParentService","Hosts":"[\"parent.dev.com\"]","NumberOfProcess":"5","Port":"15080"}'>
        <g href="#">ParentService</g>
        <ul>
          <li  data-json='{"Service":"ChildService","Hosts":"[\"child1.dev.com\"]","Port":"14758"}'>
            <g href="#">child1</g>
          </li>

          <li  data-json='{"Service":"ChildService","Hosts":"[\"child2.dev.com\"]"}'>
            <r href="#">child2</r>
          </li>

          <li data-json='{"Service":"ChildService","Hosts":"[\"child3.dev.com\"]"}'>
            <r href="#">child3</r>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</div>


<div class="split right">
  <label for="Service"><b>Service:</b> </label>
  <span id="Service"></span>
  <br>
  <label for="Port"><b>Port:</b> </label>
  <span id="Port"></span>
  <br>
  <label for="NumberOfProcess"><b>Number Of Process:</b> </label>
  <span id="NumberOfProcess"></span>
  <br>
  <label for="Hosts"><b>Hosts:</b> </label>
  <span id="Hosts"></span>
</div>