2013-07-29 2 views
0

내 목표는 댓글에 답글을 숨기는 버튼을 추가하는 것이며 각 댓글에 대한 답글이 없을 경우이 버튼을 표시하지 않습니다.childNodes가 비어있는 경우 요소 숨기기

초보자이며 열심히 공부하기 때문에이 코드를 너무 비난하지 마십시오. 버튼 후

var replies = document.querySelectorAll(".comments_list > .comment_item > .reply_comments"); //should check if .childNodes.length === 1 
var comments = document.querySelectorAll(".comments_list > .comment_item"); 
var combodys = document.querySelectorAll(".comments_list > .comment_item > .comment_body"); 

addBtn(); 

function addBtn() { 
    for (var i = 0; i < comments.length; i++) { 
    var combody = combodys[i]; 
    var btn = document.createElement("input"); 
    btn.type = "button"; 
    btn.className = "hidereplies"; 
    btn.value = "show replies"; 
    combody.appendChild(btn); //don't show if replies.childNodes.length === 1 
    } 
} 

내가 응답 블록이 비어있을 때 의견을 회신 및 숨기기 버튼이 포함되어 있는지 확인하려면 추가 :

여기에 코드입니다. childNodes에 방법을 확인하기 위해 시도와 "+1"현재 "hidereplies"버튼 값을 내가 가지고 그 문제에 직면 :

if (replies[6 + 1].childNodes.length === 1) { 
document.querySelectorAll(".hidereplies")[6].style.display = "none"; 
} 

그래서, 지금 나는 "모든 코멘트를 통해 방법을주기를 알고 숨기지 않는다 응답이없는 경우에는 '숨기기'버튼을 클릭하십시오.

일반 Javascript에서이 문제를 해결하기위한 도움을 받으십시오. 미리 감사드립니다.

답변

1

function getChildrenByClassName(el, className){ 
    var children = []; 
    for (var i = 0; i < el.childNodes.length; i++) { 
     if (el.childNodes[i].className == className) { 
      children.push(el.childNodes[i]); 
     }   
    } 
    return children; 
} 

function addBtn() { 
    var comments = document.querySelectorAll(".comments_list > .comment_item"), comment, combody; 

    for (var i = 0; i < comments.length; i++) { 
     comment = comments[i]; 
     var replies = comment.querySelectorAll('.reply_comments .comment_body'); 
     if(replies.length > 0){ 
      combody = getChildrenByClassName(comment, 'comment_body')[0]; 
      if(combody){ 
       var btn = document.createElement("input"); 
       btn.type = "button"; 
       btn.className = "hidereplies"; 
       btn.value = "show replies"; 
       combody.appendChild(btn); //don't show if replies.childNodes.length === 1 
      } 
     } 
    } 
} 
addBtn(); 

데모 시도 : 심지어 비어있는, Fiddle

+0

항상 DOM에 존재를 (그 구조가 엄격하게 서버 측 문서 템플릿을 준수 보인다). 확인하시기 바랍니다. http://jsfiddle.net/5AULt/1/ – glebcha

+0

@glebcha 업데이트보기 –

관련 문제