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>是无效的结构，浏览器将其呈现在顶部（整个表本身之外），这就是您的代码失败的原因（因为它的原因）不再child/siblings tr/td}。

解决方案： - 将<div>转换为<td>

工作示例： -

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

我无法使用jquery唯一地定位定位元素

1 个答案: