我無法定位與jquery唯一定位元素

Question

我正在一個項目上，我從數據庫池圖像src，並保持它隱藏，直到相對於圖像的位置點擊按鈕。但是，圖像是絕對定位的。以下是我的代碼段。

HTML

<div class="table-responsive"> 
    <table class="table table-bordered table-hover table-striped"> 
     <thead> 
     <tr> 
      <th>S/N</th> 
      <th>Name</th> 
      <th>Phone</th> 
      <th>Proof of Payment</th> 
      <th>Activate User</th> 
     </tr> 
    </thead> 
    <tbody> 

     <tr> 
      <td>1</td> 
      <td>Okolo Michael</td> 
      <td>08062970094</td> 
      <td><button class="btn btn-warning view_pop">View POP</button></td> 
      <td><button class="btn btn-primary">Activate User</button></td> 
      <div class="pop_view"><img src="pop/59a178206fade2.43644948.jpg" alt="File not Found"> <span class="close">X</span></div> 
      </tr><tr> 
      <td>2</td> 
      <td>Okeke Chidimma</td> 
      <td>08044323123</td> 
      <td><button class="btn btn-warning view_pop">View POP</button></td> 
      <td><button class="btn btn-primary">Activate User</button></td> 
      <div class="pop_view"><img src="pop/59a178206fade2.43644948.jpg" alt="File not Found"> <span class="close">X</span></div> 
      </tr><tr> 
      <td>3</td> 
      <td>Anibueze Chigozie</td> 
      <td>08162657108</td> 
      <td><button class="btn btn-warning view_pop">View POP</button></td> 
      <td><button class="btn btn-primary">Activate User</button></td> 
      <div class="pop_view"><img src="pop/59a178206fade2.43644948.jpg" alt="File not Found"> <span class="close">X</span></div> 
      </tr> </tbody> 
    </table> 
</div> 

JQuery的

$('.view_pop').click(function() { 
    $(this).parent().siblings('.pop_view').css('display', 'block'); 
    $(this).html('Viewed'); 
}); 

$('.close').click(function() { 
    $(this).parent('.pop_view').css('display', 'none'); 
}); 

CSS

.pop_view{ 
    display: none; 
    position: absolute; 
    z-index: 5; 
    top: 25%; 
    left: 25%; 

} 

.close{ 
    position: relative; 
    top: 0; 
    right: 0; 
} 

當單擊該按鈕時，圖像不顯示。如何根據點擊的按鈕來選擇這些圖像？

Answer 1

其實一個<div>內<tr>是無效的結構，以及瀏覽器中呈現它的頂部（全表本身之外的），這就是爲什麼你的代碼失敗（因爲它沒有更多的tr/tdchild/siblings）。

解決方案： - 轉換<div>到<td>

工作例如： -

$('.view_pop').click(function() { 
 
    $(this).parent().siblings('.pop_view').css('display', 'block'); 
 
    $(this).html('Viewed'); 
 
}); 
 

 
$('.close').click(function() { 
 
    $(this).parent('.pop_view').css('display', 'none'); 
 
});

.pop_view{ 
 
display:none; 
 
float:left; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="table-responsive"> 
 
<table class="table table-bordered table-hover table-striped"> 
 
<thead> 
 
    <tr> 
 
     <th>S/N</th> 
 
     <th>Name</th> 
 
     <th>Phone</th> 
 
     <th>Proof of Payment</th> 
 
     <th>Activate User</th> 
 
    </tr> 
 
</thead> 
 
<tbody> 
 

 
    <tr> 
 
     <td>1</td> 
 
     <td>Okolo Michael</td> 
 
     <td>08062970094</td> 
 
     <td><button class="btn btn-warning view_pop">View POP</button></td> 
 
     <td><button class="btn btn-primary">Activate User</button></td> 
 
     <td class="pop_view"><img src="pop/59a178206fade2.43644948.jpg" alt="File not Found"> <span class="close">X</span></td> 
 
    </tr><tr> 
 
     <td>2</td> 
 
     <td>Okeke Chidimma</td> 
 
     <td>08044323123</td> 
 
     <td><button class="btn btn-warning view_pop">View POP</button></td> 
 
     <td><button class="btn btn-primary">Activate User</button></td> 
 
     <td class="pop_view"><img src="pop/59a178206fade2.43644948.jpg" alt="File not Found"> <span class="close">X</span></td> 
 
    </tr><tr> 
 
     <td>3</td> 
 
     <td>Anibueze Chigozie</td> 
 
     <td>08162657108</td> 
 
     <td><button class="btn btn-warning view_pop">View POP</button></td> 
 
     <td><button class="btn btn-primary">Activate User</button></td> 
 
    <td class="pop_view"><img src="pop/59a178206fade2.43644948.jpg" alt="File not Found"> <span class="close">X</span></td> 
 
    </tr> </tbody> 
 
</table> 
 
</div>