코드 작성자: openperl@naver.com
블로그: netwaremore, TechWrite, Translation (tistory.com)
2021.08.14
- 더보기 숫자 표시 부분 스크립트 파일 오타 교정
- 수정한 첨부 파일 등록
2021.07.27
- 더보기 버튼에 숨긴 글 숫자 추가
※ 코드에 오류가 있을 경우 댓글 남겨 주시면 많은 도움이 됩니다.
오류 발생 원인
1. 조건식 오류
if ( $item.length > 4 ){
$item.each(function(){
if ( $(this).index() > 4 ) $(this).hide();
});
$cover.append('<button type="button" class="more">more</button">');
글('$item')의 개수('length')가 4개를 넘어 5개 이상일 경우, 5번째(index 4) 다음 6번째 글부터 숨김('hide') 처리한다는 잘못된 구문입니다. index는 첫 글이 0부터 시작합니다. 처음 나온 4를 5로 수정했습니다. 6개 이상의 글이 있으면 6번째 글부터는 모두 숨김 처리하고 커버 하단에 더보기 버튼을 추가('append')합니다.
if (1, 2, 3, 4, 5) + (6, 7, 8, ...) / hide (6, 7, 8, ...)
※ 글 5개까지는 '더보기(more)' 버튼 보이지 않습니다.
※ 글 8개까지 버튼을 보이지 않으려면:
$item.length > 8
$(this).index() > 7
2. 뉴스 레터 커버 아이템을 여러 개 사용하면서 동일한 이름의 클래스(cover-thumbnail-2)를 지정하였기 때문에, 각각의 커버 아이템을 분리하여 인식할 수 있는 코드가 필요합니다. 필요한 인식 코드를 적용하지 않았기 때문에 하나의 '더보기(more)' 버튼을 누르면 다른 커버 아이템에도 영향을 미칩니다. 커버 아이템을 인식하는 코드를 추가하고 전체 코드를 수정하였습니다.
수정 내역
※ 홈 화면에 2개 이상의 뉴스레터 설정할 경우 대부분의 오류 발생
더보기(more) 버튼 개별 작동 오류 수정
리스트 5개 미만일 경우 더보기 버튼 나타나는 오류 수정
홈 화면에 2개의 뉴스레터 사용할 경우 더보기 버튼의 끄기 오류 수정
한 개의 뉴스레터에 부착한 더보기 버튼 누를 때 모든 뉴스레터 항목에 적용되는 오류 수정
적용 방법
티스토리 북클럽 스킨의 'script.js' 파일을
복사하여 백업본을 만들어 놓고,
텍스트 편집기로 열고
"function coverLoadMore(){"로 시작하는 원본 함수(Function) 코드를 아래 "수정용 코드"로 교체하고 저장
티스토리 블로그에 업로드하여 기존 파일과 교체
웹 브라우저 새로 고침하고 점검
※ 웹 브라우저의 캐시 파일을 미리 삭제하고 테스트
※ 수정 방법과 수정용 코드 기재한 텍스트 파일 페이지 하단에 첨부
※ 북클럽 원본
북클럽 script.js
오류 있는 원본 코드
function coverLoadMore(){
var $cover = $(".cover-thumbnail-2"),
$item = $cover.find("ul li");
if ( $item.length > 4 ){
$item.each(function(){
if ( $(this).index() > 4 ) $(this).hide();
});
$cover.append('<button type="button" class="more">more</button">');
$cover.on("click", ".more", function(){
$(this).remove();
$item.removeAttr("style");
});
}
}
※ 수정용 코드 - 1
북클럽 스킨 script.js
오류 수정한 새로운 코드
function coverLoadMore(){
var $cover = $(".cover-thumbnail-2");
$cover.each(function() {
var $thumbnail = $(this),
$item = $thumbnail.find("li");
if ( $item.length > 5 ){
$item.each(function(){
if ( $(this).index() > 4 ) $(this).hide();
});
$thumbnail.append('<button type="button" class="more">more</button">');
}
$thumbnail.on("click", ".more", function(){
$(this).remove();
$item.removeAttr("style");
});
});
}
※ 수정용 코드 - 2
- 2021.07.27
- 약간의 코드를 추가하였습니다. 더보기 버튼에 숨긴 글이 몇 개인지 옆에 숫자로 표시합니다.
북클럽 스킨 script.js
1. 오류 수정한 코드
2. 더보기 버튼에 숨긴 글 숫자 추가
function coverLoadMore(){
var $cover = $(".cover-thumbnail-2");
$cover.each(function() {
var $thumbnail = $(this),
$item = $thumbnail.find("li"),
num = $item.length;
if ( num > 5 ){
$item.each(function(){
if ( $(this).index() > 4 ) $(this).hide();
});
$thumbnail.append('<button type="button" class="more">더보기 ('+(num-5)+')</button>');
}
$thumbnail.on("click", ".more", function(){
$(this).remove();
$item.removeAttr("style");
});
});
}
※ 글 8개까지 버튼을 보이지 않으려면:
if ( num > 8 )
if ( $(this).index() > 7 )
+(num-8)+
※ 필요한 코드와 수정 방법 그리고 적용 방법 설명하는 텍스트 파일입니다. 실행 파일 아닙니다. 다운로드하여 저장합니다.
※ 북클럽 원본 코드, 수정용 코드 - 1, 수정용 코드 -2 모두 들어 있습니다.
댓글