我正在做一个元素,我从数据库中汇集图像 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;
}
单击按钮时,图像不显示。如何根据单击的按钮唯一地选择这些图像?
最佳答案
实际上是一个<div>
里面<tr>
是无效的结构,并且浏览器将其呈现在顶部(整个表本身之外),这就是您的代码失败的原因(因为它不再是 child/siblings
的 tr/td
)。
解决方案:- 转换 <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>
关于jquery - 我无法使用 jquery 唯一定位定位元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45901016/