配置された要素を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

は実際に<tr>内部<div>が無効構造であり、かつブラウザがあなたのコードが失敗した理由（それはtr/tdのノーモアchild/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>