1

我正在尝试根据按下回复按钮的位置将我的回复表单从一个评论块移动到另一个评论块。

例如我有这个代码。

<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.或者是否有更好的方法来做到这一点。将不胜感激任何帮助或相关链接。谢谢你。

4

1 回答 1

1

以下是使用 jQuery 的方法：

http://jsfiddle.net/Cd4Xk/

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

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

});

如果没有 jQuery，那就更难了。这个问题让我找到了最终的解决方案：如何在不使用库的情况下在 JavaScript 中插入 After()？

我还发现此链接有助于解决此问题： 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)" 到您的链接。

希望有帮助。

于 2012-07-23T15:54:48.237 回答