我正在尝试将从数据库中检索到的每张图像放入可折叠的 <div>
中.我想使用 jQuery,因为我对如何使用该库完成此任务有一个大致的了解。我的问题是每个用户的页面会有不同数量的图像,每个 <div>
需要是唯一的,以便可以隐藏一个图像而显示另一个图像。
我将图像回显出来的代码如下所示:
<td><div id="img<? echo $url['url_key']; ?>"><img src="<? echo $url['qr_code']; ?>" /></div></td>
这将输出如下内容:
<div id="img3"><img src="" /></div>
我认为显示和隐藏图像的 jQuery 必须看起来像这样:
$(document).ready(function() {
$('.some_unique_identifier').click(function() {
$('#load_div_that_corrolates').fadeToggle("slow")
});
我的问题是如何在我的 jQuery 代码中使用我从 PHP 回显的唯一标识符,以便每个唯一代码都有自己的 jQuery block 。或者是否有更好的方法来制作一组可折叠的图像。另外,我设置了 <div>
有一个
style="display: none"
属性,这使得我的表格边框也不会显示。我可以设置一个不同的值来显示不会发生这种情况的地方吗?
最佳答案
通过让用户点击 DIV 来实现这一点
添加一个类到img div
<div id="img3" class="imgContainer"><img src="" /></div>
当他们点击图像 div 时:
$('.imgContainer').on('click', function() {
$(this).find('img').fadeToggle('slow');
};
CSS 样式:
.imgContainer {
border: 1px solid #000;
}
通过为每个图像创建一个按钮来实现这一点
在每个循环中还创建一个带有 KEY 的按钮:
<button onclick="ShowImage('<? echo $url['url_key']; ?>')">toggle image</button>
然后使用类似的函数来显示带有从按钮传递的参数的图像:
function ShowImage(imgKey) {
$('#img' + imgKey + ' img').fadeToggle('slow');
}
关于php - 数据库中所有图像的隐藏/显示按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21128133/