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

-1

大家好，任何人都可以幫助我瞭解如何僅顯示JSON數據一次，例如我已經顯示了人員編號1的信息，然後我將鼠標懸停在Person編號的名稱上2，然後徘徊回人一把手，而不是顯示1個人的信息，再次它只是強調已經顯示的人物1只使用JQUERY或Javascript顯示JSON數據一次

這裏是我的顯示信息

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

代碼之前顯示的資訊任何幫助？

來源

2017-10-06 Kyle

* 「......然後我懸停的人數量2名......」 * * * OK ** *「...然後回到第一個人......」* **我到目前爲止與您有** **「...而不是再次顯示Person 1的信息...... 「* **你想要Person 2的信息？** *」......它只會突出顯示已經顯示的內容......「* **這將是Person 2 ** *」...以前顯示的信息人1。「* **咦？！ ......什麼？** – zer00ne

如果你只是說，「我試圖展示每個人在徘徊時的信息？這就是你剛纔所說的：」。當將鼠標懸停在人1-人員1信息彈出窗口「。2.然後到P2信息P2上。3.然後返回到P1，而不是P1信息再次，它將只突出顯示已經顯示的P1信息。沒有任何意義 – zer00ne

@ zer00ne抱歉花花公子只是一個新手到JavaScript/jquery和對不起，即時通訊不是那麼好在英語:-)無論如何，我的情況是，我有這個容器的div然後，如果該容器顯示人1它會留在那裏，如果我在人員2懸停時，它會顯示在人員1的信息下面（希望你仍然可以獲得），那麼如果我回到人員1而不是在人員2下面顯示，則只會突出顯示人員2上方顯示的人員1的信息:-) – Kyle

您的代碼不完整，但我懷疑您有多個元素與的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>

來源

2017-10-06 00:41:12

對不完整的代碼我只是一個初學者在這個JavaScript，生病嘗試你的示例代碼，更新你 – Kyle

我怎麼能張貼我的屏幕截圖關於我的結果 – Kyle

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

回答

相關問題