1

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と制限し、ボタンのonClickで次の10をロードします。標準的なもの。

次に、別のボタンをクリックすると、テキストを非表示にして画像を表示するか、もう一度クリックして、次のようにします。

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

これは最初の画像セットには最適ですが、DOMへの今後のすべての追加のために状態を保持する必要があります。これは可能ですか？

したがって、次の10個の画像が読み込まれ、DOMは現在の状態を認識します。たとえば、クラス.imgTitleが非表示かどうかを認識し、トグルボタンを今後クリックすると、DOM内のすべてのdivに影響します。

4

1 に答える 1

1

個々の画像を切り替える代わりに、クラスを追加し、#imagesCSSを使用し.imgTitleて、そのクラスが存在するときにその中のすべての画像を非表示にすることができます。

次に、を呼び出すだけ.toggleClass()です。

于 2013-03-25T20:08:45.343 に答える