如何在jquery中的rate按钮下面显示消息状态？

Question

我的页面上有一个速率按钮，使用PHP和jQuery创建。

单击该按钮后，会显示一条消息并在一段时间后隐藏“#num voteing including you”

HTML：

div class="voting_wrapper" id="1001">
    <div class="voting_btn">
        <div class="up_button">&nbsp;</div>
        <span class="up_votes"></span>
    </div>
</div>

jQuery的：

 $(document).ready(function() {
     //####### on page load, retrive votes for each content
     $.each( $('.voting_wrapper'), function(){
         //retrive unique id from this voting_wrapper element
         var unique_id = $(this).attr("id");
         //prepare post content
         post_data = {'unique_id':unique_id, 'vote':'fetch'};
        //send our data to "vote_process.php" using jQuery $.post()
         $.post('vote_process.php', post_data,  function(response) {
                //retrive votes from server, replace each vote count text
                 $('#'+unique_id+' .up_votes').text(response.vote_up +' user has voted'); 
             },'json');
     });

     //####### on button click, get user vote and send it to vote_process.php using jQuery $.post().
     $(".voting_wrapper .voting_btn").click(function (e) {

         //get class name (down_button / up_button) of clicked element
         var clicked_button = $(this).children().attr('class');

         //get unique ID from voted parent element
         var unique_id   = $(this).parent().attr("id"); 

         if(clicked_button==='up_button') { //user liked the content
             //prepare post content
             post_data = {'unique_id':unique_id, 'vote':'up'};

             //send our data to "vote_process.php" using jQuery $.post()
             $.post('vote_process.php', post_data, function(data) {

                 //replace vote up count text with new values
                 $('#'+unique_id+' .up_votes').text(data);
                 //thank user for liking the content
                 dataModified = data+' users has voting including you';
                 $('#message-status').hide().html(dataModified).fadeIn('slow').delay(5000).hide(1);
             }).fail(function(err) { 

             //alert user about the HTTP server error
                 alert(err.statusText); 
             });
         }

     });
     //end 

 });

它工作正常，但消息的放置不正确。 当我点击按钮时，该消息状态显示在页面顶部，而我需要它显示在率按钮下方。

我可以知道如何添加代码来实现这一目标吗？ 我想我可以使用append(); 但我正在努力在哪里以及如何添加脚本。 谁能帮我？

提前致谢。

Answer 1

尝试替换你的代码，

$('#message-status').hide().html(dataModified).fadeIn('slow').delay(5000).hide(1);

有了这个

$('#message-status').css({
        'position': 'absolute',
        'left': $(this).offset().left,
        'top': $(this).offset().top + $(this).height() + 5
   }).hide().html(dataModified).show("slow").delay(3000).hide("slow");

Answer 2

原因在于，可能是因为#message-status元素最初位于voting_wrapper元素之外。 您可以使用.insertAfter()在.voting_btn按钮下面的包装器中移动#message-status

$('#message-status').hide().html(dataModified).insertAfter('#'+unique_id+' .voting_btn').fadeIn('slow').delay(5000).hide(1);

因此，在AJAX调用之后，您的HTML变为：

<div class="voting_wrapper" id="1001">
    <div class="voting_btn">
        <div class="up_button">&nbsp;ddd</div>
        <span class="up_votes">X</span>
    </div>
    <div id="message-status">X users has voting including you</div>
</div>

---

[编辑]

如果你需要整个voting_wrapper下面的消息，请使用：

$('#message-status').hide().html(dataModified).insertAfter('#'+unique_id).fadeIn('slow').delay(5000).hide(1);