0

私の目標は、コメントの返信を非表示にするボタンを追加し、各コメントに返信がない場合はこのボタンを表示しないことです。

私は初心者で一生懸命勉強しているので、このコードについてあまり責めないでください。

コードは次のとおりです。

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 メソッドをチェックしようとしましたが、現在の「hidereplies」ボタンの値に「+1」しなければならないという問題に直面しました:

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

そのため、今のところ、すべてのコメントを循環して、返信がない場合に「返信を非表示」ボタンを非表示にする方法がわかりません。

プレーンな Javascript でこの問題を解決するための助けを願っています。前もって感謝します！

4

1 に答える 1

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();

デモ:フィドル

于 2013-07-29T10:59:15.660 に答える