php - 数据库中所有图像的隐藏/显示按钮

Question

我正在尝试将从数据库中检索到的每张图像放入可折叠的 <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"

属性，这使得我的表格边框也不会显示。我可以设置一个不同的值来显示不会发生这种情况的地方吗？

Answer 1

通过让用户点击 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');
}