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块。或者，如果有更好的方法来制作可折叠的图像集。另外，我将<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>

然后类似的功能显示图像与param从按钮传递：

function ShowImage(imgKey) {
    $('#img' + imgKey + ' img').fadeToggle('slow');
}

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

1 个答案: