Question

感谢您让我将您用作资源。我正在制作一个包含不同评论的博客页面，这些评论共享同一个类，并且它们都有共享类的回复按钮。当点击回复按钮时，弹出模式，用户可以在其中输入他/她的回复，并且当点击回复回复时，回复应该发布到特定评论。我很难针对特定评论的路径。我知道＆＃34;这个＆＃34;关键字发挥作用，但我不确定我是否正确使用它，我也正在阅读.attr（）并认为我可能在某处需要它。我希望让它工作，以便有人可以过来回复回复，甚至可以推送＆＃34;回复JSON模板并以这种方式追加，但这比我知道如何做更多。即使你没有给我一个完整的解决方案，让我知道我需要阅读的内容也会有所帮助！谢谢！

    //Reply button function to show modal//////////////////////////////////
        sabio.page.handlers.replyButtonClickToShowModal = function (event) {
            event.preventDefault();
            $('#myModal').modal();
            console.log("reply button is firing");
        };

        $(".replyButton").on('click', sabio.page.handlers.replyButtonClickToShowModal);

        //Get reply from modal form and append to correct comment//////////////////////////////////////
        sabio.page.handlers.submitReplyButtonClick = function () {
            var clickedLink = $(this).closest(".comment.mediaclearfix");
            var replyTitle = $('#addReplyTitle').val();
            var replyEmail = $('#addReplyEmail').val();
            var replyContent = $('#addReplyContent').val();
            var replyFormat = '<br> <div class="comment-avatar media-left"> <img src="http://placehold.it/50x50" alt="avatar">' +
           '</div><div class="comment-content media-body clearfix"> <div class="comment-avatar media-left"></div><h3 class="media-heading">' +
           replyTitle + '</h3> <div class="comment-meta">By ' + replyEmail + '</div> <div class="comment-body"> <p>'
           + replyContent + '</p><a href="#" class="replyButton">' +
           '<i class="fa fa-reply"> </i> Reply </a> </div> </div>';
            clickedLink.append(replyFormat);
            console.log("submit reply function is firing");
            $('#myModal').dialog('close');
        };


        $('.btn.btn-success.cmdAddComment').on('click', sabio.page.handlers.submitReplyButtonClick);

Answer 1

我相信你的方法几乎99％正确。我能看到的唯一错误是在以下声明中：

var clickedLink = $(this).closest(".comment.mediaclearfix");

这不起作用，因为this引用是模态对话框中出现的submit按钮。所以我们需要修改这一点，如下所示：

注意：以下代码更改将假设为;用户可以打开单一模式弹出窗口提交回复。

       //Reply button function to show modal//////////////////////////////////
        sabio.page.handlers.replyButtonClickToShowModal = function (event) {
            event.preventDefault();
            $('#myModal').data("clickedLinkRef", $(this));  //saving the clicked link ref for future use
            $('#myModal').modal();
            console.log("reply button is firing");
        };

现在，在submit按钮处理程序中，我们将获取已保存的点击链接引用，以定位相应的“评论”。

$(".replyButton").on('click', sabio.page.handlers.replyButtonClickToShowModal);

//Get reply from modal form and append to correct comment//////////////////////////////////////
sabio.page.handlers.submitReplyButtonClick = function () {

    var clickedLink = $('#myModal').data("clickedLinkRef").closest(".comment.mediaclearfix"); //fetching the saved clicked link reference

    var replyTitle = $('#addReplyTitle').val();
    var replyEmail = $('#addReplyEmail').val();
    var replyContent = $('#addReplyContent').val();
    var replyFormat = '<br> <div class="comment-avatar media-left"> <img src="http://placehold.it/50x50" alt="avatar">' +
   '</div><div class="comment-content media-body clearfix"> <div class="comment-avatar media-left"></div><h3 class="media-heading">' +
   replyTitle + '</h3> <div class="comment-meta">By ' + replyEmail + '</div> <div class="comment-body"> <p>'
   + replyContent + '</p><a href="#" class="replyButton">' +
   '<i class="fa fa-reply"> </i> Reply </a> </div> </div>';
    clickedLink.append(replyFormat);
    console.log("submit reply function is firing");
    $('#myModal').dialog('close');
};


$('.btn.btn-success.cmdAddComment').on('click', sabio.page.handlers.submitReplyButtonClick);

我希望这会帮助您实现目标。

在按钮单击时定位并附加到特定DOM元素

1 个答案: