Question

我试图根据推送回复按钮的位置将我的回复表单从一个注释块移动到另一个注释块。

例如我有这个代码。

<ul class="comments-list"> 
    <li class="comment" id="'.$comComment->CommentID.'">
        <div>Comment Content</div>
        <a class="comment-reply-link"></a>
        <ul>
            <li>
                <div>Comment Content</div>
                <a class="comment-reply-link"></a>
            </li>
        </ul>
    </li>
    <li>
        <div>Comment Content</div>
        <a class="comment-reply-link"></a>
    </li>
</ul>

然后回复表格：

<div id="comment-reply">And Form HEre</div>

我知道如何使用显示块和没有显示块，但我想避免在每个注释块中制作回复表单并隐藏它。是否可以使用parentNode.insertBefore和parentNode.removeChild.这样的方法来实现，或者有更好的方法可以做到这一点。非常感谢任何帮助或相关链接。谢谢。

Answer 1

以下是使用jQuery的方法：

http://jsfiddle.net/Cd4Xk/

$('a.comment-reply-link').click(function(){

    $(this).after($('#comment-reply'));

});

没有jQuery就更难了。这个问题让我得到了最终的解决方案：How to do insert After() in JavaScript without using a library?

我还发现此链接有助于解决此问题： http://snipplr.com/view/2107/insertafter-function-for-the-dom/

这是一个有效的解决方案： http://jsfiddle.net/Cd4Xk/1/

以下是该解决方案的代码：

function replyForm(me){
    var commentForm = document.getElementById('comment-reply')
    insertAfter(commentForm, me);

}

function insertAfter(newElement,targetElement) {
    //target is what you want it to go after. Look for this elements parent.
    var parent = targetElement.parentNode;

    //if the parents lastchild is the targetElement...
    if(parent.lastchild == targetElement) {
    //add the newElement after the target element.
    parent.appendChild(newElement);
    } 
    else {
    // else the target has siblings, insert the new element between the target and    it's next sibling.
     parent.insertBefore(newElement, targetElement.nextSibling);
    }
}

当然，您需要在链接中添加onclick="javascript:replyForm(this)"。

希望有所帮助。

将回复表单从一个div移动到另一个div javascript

1 个答案: