目标并附加到按钮上的特定DOM元素点击

问题描述：

感谢您让我使用您作为资源。我正在制作一个具有不同评论的博客页面，这些评论共享同一个班级，并且他们都有共享班级的回复按钮。当单击回复按钮时，弹出一个模式，用户可以在回复中输入内容，并且单击回复后回复应该发布到特定评论。我很难针对具体评论的路径。我知道“this”这个关键词起作用，但我不确定我是否正确使用它，我还在阅读.attr（），并认为我可能在某处需要它。我希望它能够正常工作，以便有人能够回复并回复答复，甚至可以将答复“推送”到JSON模板中并以此方式追加，但这比我现在知道的要做的更多。即使你不给我一个完整的解决方案，让我知道我需要阅读的内容也将有所帮助！谢谢！目标并附加到按钮上的特定DOM元素点击

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

答

我相信你的方法几乎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元素点击

相关推荐