如何顯示和隱藏文字，而不是在JavaScript中使用警報？

Question

這裏是JavaScript進行上下投票點擊功能：

<script type="text/javascript"> 
$(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); 
       $('#'+unique_id+' .down_votes').text(response.vote_down); 
      },'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==='down_button') //user disliked the content 
     { 
      //prepare post content 
      post_data = {'unique_id':unique_id, 'vote':'down'}; 

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

       //replace vote down count text with new values 
       $('#'+unique_id+' .down_votes').text(data); 

       //thank user for the dislike 
       alert("Thanks! Each Vote Counts, Even Dislikes!"); 

      }).fail(function(err) { 

      //alert user about the HTTP server error 
      alert(err.statusText); 
      }); 
     } 
     else 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 
       alert("Thanks! For Liking This Content."); 
      }).fail(function(err) { 

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

    }); 
//end 

}); 
</script> 

HTML：

<div class="content_wrapper"> 
    <h3><img src="9780143332497.jpg" alt=""> 
     <!-- voting markup --> 
     <div class="voting_wrapper" id="1001"> 
      <div class="voting_btn"> 
       <div class="up_button">&nbsp;</div><span class="up_votes">0</span> 
      </div> 
        </div> 
     <!-- voting markup end --> 
    </h3> 

    </div> 

當單擊該按鈕，它顯示了文字提示框，

可我知道，如何顯示文字和隱藏像動畫，

我需要當我點擊按鈕，它顯示「你投票」，然後它隱藏。

任何人都可以幫到我嗎？提前致謝。

Answer 1

你想使用什麼稱爲模態/彈出/對話框。 Here你有一個在引導中使用模態的例子。所有你需要做的是用你的代碼中的alert()替換爲正確使用的模態窗口。

Answer 2

您需要創建一個帶有ID的div，並將其放在要顯示文本的位置。然後，你可以用一些替代的警告語句像

$('#myDiv').text('My Text!');

或

$('#myDiv').innerHtml('<span>My Text!</span>');

Answer 3

當單擊該按鈕，創建一個div容器，並證明這一點。 然後等待2000ms，然後淡出它！

$("#myButton").click(function() { 
     var myAlert = $('<div />').addClass("alert alert-success").html("test"); 
     $("body").append(myAlert); 
     setTimeout(function() { 
      $(myAlert).fadeOut(); 
     },2000); 
    });