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이라고 제한하고, 다음에 버튼을 onClick하면 다음 10을 적재한다. 표준 재료.

지금, 다른 버튼의 클릭에 내가 텍스트를 숨기고 단지 이미지를 표시하거나가 다시 클릭합니다, 그래서 이미지의 첫 번째 세트에 대한 좋은 작품

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

같은 있지만, DOM에 모든 미래 추가를위한 상태를 유지해야합니다. 가능한가요?

따라서 다음 10 개의 이미지가로드되고 DOM은 현재 상태를 알고 있습니다. .imgTitle 클래스가 숨겨져 있거나 표시되지 않으며 이후의 모든 토글 버튼 클릭이 DOM의 모든 div에 영향을 미칩니다.

Answer 1

개별 이미지를 토글하는 대신, #images에 클래스를 추가하고 CSS를 사용하여 해당 클래스가있을 때 CSS 안에 .imgTitle을 모두 숨길 수 있습니다.

그런 다음 .toggleClass()으로 전화하면됩니다.