Question

大家好，所有人都可以帮助我如何仅显示一次JSON数据，例如我已经显示了人员编号1的信息，然后我将鼠标悬停在人员编号2的名称上，然后将其悬停回到人员编号1，而不是再次显示人员1的信息，它只会突出显示已显示的先前显示的人员信息1

这是我显示信息的代码

foreach (i = 0; i < PersonInfo.length; i++) {
    if (e.target.parentNode.parentNode == PersonInfo[i])
    {
        index = i;
        break;
        //document.getElementById("rightcontainer").style.backgroundColor = "green" ;
    }
}



var html += '';
html += '<div id="infocontainer">';
html += '<div class="p-image"><img src="src/images/someimage.png"/></div>';
html += '<div class="popupdetail">';
html += '<div class="p-name"> Person Name: ' + Person[index].person_name+ '</div>';
html += '<div class="p-name"> Status: ' + Person[index].status + '</div>';
html += '<div class="p-name"> Country: ' + Person[index].country + '</div>';
html += '</div>';
html += '</div>';

任何帮助？

Answer 1

您的代码不完整，但我怀疑您有多个id infocontainer <div id="infocontainer">的元素？

无论如何，这里是如何使用单个var PersonInfo = [{ person_name: "Alice", image_url: "https://placeimg.com/100/50/people", status: "alive", country: "USA" }, { person_name: "Bob", image_url: "https://placeimg.com/100/50/people/sepia", status: "deceased", country: "Australia" }]; PersonInfo.forEach((pi, i) => { $("#persons div").eq(i).hover(function() { $i = $("#infocontainer"); $i.find(".p-image img").attr("src", pi.image_url); $i.find(".p-name span").text(pi.person_name); $i.find(".p-status span").text(pi.status); $i.find(".p-country span").text(pi.country); $i.show(); }, function() { $("#infocontainer").hide(); }); });：

执行此操作的

＆＃13;

#persons div {
  display: inline-block;
  padding: 2em;
  border: 1px solid black;
  margin: 1em
}

#infocontainer {
  display: none;
  position: absolute;
  right: 20px;
  top: 20px
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="persons">
  <div>Alice</div>
  <div>Bob</div>
</div>

<div id="infocontainer">
  <div class="p-image"><img src="" /></div>
  <div class="popupdetail">
    <div class="p-name"> Person Name: <span></span></div>
    <div class="p-status"> Status: <span></span></div>
    <div class="p-country"> Country: <span></span></div>
  </div>
</div>

＆＃13;

application-production.properties

＆＃13;

使用JQUERY或Javascript仅显示一次JSON数据

1 个答案: