Question

我正在通过API调用将图像和图像标题加载到DOM，例如

var html = '';
var i=0, length=data.length, image;
for(; i<length; i++) {
html += '<li>';
html += '<div class="holder">';
html += '<div class="image"><img src="/path/to/image.jpg"></div>';
html += '<div class="imgTitle">Image title</div>';
html += '</div>';
html += '</li>';
}

$('#images').append(html);

我将此限制为10，然后单击按钮加载下一个10.标准内容。

现在，点击不同的按钮，我想隐藏文字，只显示图片，或者再次点击，这样就像

$('#txtHide').click(function() {
    $('.imgTitle').toggle();
});

哪个适用于第一组图像，但我需要保持状态以便将来添加到DOM中，这可能吗？

因此，接下来的10个图像被加载并且DOM知道当前状态，例如类.imgTitle隐藏或未隐藏，以后所有切换按钮的点击都会影响DOM中的所有div。

Answer 1

您可以向#images添加一个类，而不是切换单个图像，并在该类存在时使用CSS隐藏其中的所有.imgTitle。

然后，您只需拨打.toggleClass()。

即可

添加到DOM后保持状态

1 个答案: