使用 JQUERY 或 Javascript 僅顯示一次 JSON 數據

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(); }); });

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

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