僅在彈出窗口中顯示內容單擊div

Question

我有這個 ：

<div class="wrapper">
     <div class="left1">
     <div id="position" style="background-color:yellow;border:1px solid black;display:none;width:200px;height:200px;"class="PopupDiv";>Position 1<br>Price x<br>Available on xx-xx-xx<br><a href="http://flibay.com/buy.php";>Buy;</a></div>
             <a href="#" onclick="Popup.show('position','reference','center center',{'constrainToScreen':true});;return false;">Details;</a><br>
        <img src="img/banner_1.jpg">
     </div>
     <div class="left2">
    <div id="position" style="background-color:yellow;border:1px solid black;display:none;width:200px;height:200px;"class="PopupDiv";>Position 2<br>Price x<br>Available on xx-xx-xx<br><a href="http://flibay.com/buy.php";>Buy;</a></div>
             <a href="#" onclick="Popup.show('position','reference','center center',{'constrainToScreen':true,'offsetTop':-200});;return false;">Details;</a><br>
        <img src="img/banner_1.jpg">
     </div>
     <div class="left3">
    <div id="poistion" style="background-color:yellow;border:1px solid black;display:none;width:200px;height:200px;"class="PopupDiv";>Position 3<br>Price x<br>Available on xx-xx-xx<br><a href="http://flibay.com/buy.php";>Buy;</a></div>
             <a href="#" onclick="Popup.show('position','reference','center center',{'constrainToScreen':true,'offsetTop':-200});;return false;">Details;</a><br>
        <img src="img/banner_1.jpg">
     </div>
     <div class="left4">
     <div id="position" style="background-color:yellow;border:1px solid black;display:none;width:200px;height:200px;top:50%;left:50%;margin:-(height/2)px 0 0 -(width/2)px;"class="PopupDiv";>Position 4<br>Price x<br>Available on xx-xx-xx<br><a href="http://flibay.com/buy.php";>Buy;</a></div>
             <a href="#" onclick="Popup.show('position','reference','center center',{'constrainToScreen':true,'offsetTop':-200});;return false;">Details;</a><br>
        <img src="img/banner_1.jpg">
     </div>
     <div class="left5">
    <div id="position" style="background-color:yellow;border:1px solid black;display:none;width:200px;height:200px;"class="PopupDiv";>Position 5<br>Price x<br>Available on xx-xx-xx<br><a href="http://flibay.com/buy.php";>Buy;</a></div>
             <a href="#" onclick="Popup.show('position','reference','center center',{'constrainToScreen':true,'offsetTop':-200});;return false;">Details;</a><br>
        <img src="img/banner_1.jpg">
     </div>
     <div class="left6">
    <div id="position" style="background-color:yellow;border:1px solid black;display:none;width:200px;height:200px;"class="PopupDiv";>Position 6<br>Price x<br>Available on xx-xx-xx<br><a href="http://flibay.com/buy.php";>Buy;</a></div>
             <a href="#" onclick="Popup.show('position','reference','center center',{'constrainToScreen':true,'offsetTop':-200});;return false;">Details;</a><br>
        <img src="img/banner_1.jpg">
     </div>
 </div>

它是以div為中心的javascript彈出窗口，但是如果我單擊了這6個div中的任何一個，則在ID為“ position”的第一個div中進入彈出式內容列表。 如何僅獲得我單擊的那些div的內容？ PS Javacript popup.js來自此鏈接，帶有我的修改http://www.javascripttoolbox.com/libsource.php/popup/combined/popup.js

Answer 1

您對所有div使用相同的id 。 id在整個文檔中必須是唯一的。

<div id="position" style="background- ..snip...
          ^^^^^^--- each of these MUST be unique.

嘗試重命名它們position1 ， position2等。

重復的ID會使文檔無效，並且getElementById（）不會通過返回所有匹配的元素來補償您的錯誤。 它將（正確地）假設一個ID應該是唯一的，並且僅返回FIRST匹配元素。