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

您需要创建一个带有id的div并将其放在要显示文本的位置。然后，您可以使用类似

的替换警报语句

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

或

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

Answer 2

单击按钮时，创建一个div容器并显示它。然后等待2000ms，然后淡出它！

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

Answer 3

您想要使用的是模态/弹出/对话框。 Here你有一个在bootstrap中使用modal的例子。您只需使用正确使用的模态窗口替换代码中的alert()即可。

如何显示和隐藏文本而不是在JavaScript中使用警报？

3 个答案: