如何在 jquery 中的速率按钮下方显示消息状态


How to show a message status below the rate button in jquery?

我的页面上有一个费率按钮,是用PHP和jQuery创建的。

单击按钮时,会显示一条消息,并在一段时间后隐藏"#num 投票包括您"

.HTML:

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

j查询:

 $(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();但我正在努力在哪里以及如何添加脚本。谁能帮我?

提前谢谢。

原因可能是因为#message-status元素最初放置在voting_wrapper元素之外。您可以使用#message-status将包装内移动到.voting_btn按钮下方,使用.insertAfter()

$('#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);

尝试替换你的代码,

$('#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");