html评论列表回复表单定位

寻梦xunm| 210| 收集

4个月前

超过121天温馨提示

本文最后更新于2024年12月08日，已超过121天没有更新，若内容或图片失效，请留言反馈。

进行更新微博客程序的时候，准备重新修改一下评论插件的回复表单定位问题，经过AI反复修改生成最终代码如下。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Comment List with Reply Form</title>
    <style>
        #comment-section {
            margin-bottom: 20px;
        }

        .comment {
            margin-bottom: 15px;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }

        .reply-form {
            margin-top: 10px;
        }

        .reply-form textarea {
            width: 100%;
            height: 60px;
            margin-bottom: 10px;
        }

        #bottom-reply-form {
            margin-top: 20px;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }

        #bottom-reply-form textarea {
            width: 100%;
            height: 60px;
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
    <div id="comment-section">
        <div class="comment">
            <p>This is a comment.</p>
            <button class="reply-btn">回复</button>
        </div>
        <div class="comment">
            <p>This is another comment.</p>
            <button class="reply-btn">回复</button>
        </div>
    </div>
    <form id="bottom-reply-form">
        <textarea placeholder="Write your reply..."></textarea>
        <button type="submit">Submit</button>
    </form>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const replyButtons = document.querySelectorAll('.reply-btn');
            const replyForm = document.getElementById('bottom-reply-form');
            let originalParent = replyForm.parentElement; // Store the original parent of the reply form

            replyButtons.forEach(button => {
                button.addEventListener('click', function() {
                    if (this.textContent === '取消') {
                        // If the button text is "Cancel", move the form back to the bottom
                        originalParent.appendChild(replyForm);
                        this.textContent = '回复';
                    } else {
                        // Otherwise, move the form to the clicked comment
                        replyButtons.forEach(btn => {
                            if (btn !== this) {
                                // Reset other buttons to "Reply"
                                btn.textContent = '回复';
                                if (btn.parentElement.classList.contains('comment') && btn.nextElementSibling === replyForm) {
                                    originalParent.appendChild(replyForm);
                                }
                            }
                        });

                        // Move the form to the clicked comment
                        if (replyForm.parentElement.classList.contains('comment')) {
                            // If the form is already in a comment, move it back to the bottom
                            originalParent.appendChild(replyForm);
                        }
                        this.parentNode.appendChild(replyForm);
                        this.textContent = '取消';
                    }
                });
            });
        });
    </script>
</body>
</html>