Javascript如何在点击时自动更改单词而无需刷新浏览器。

Question

我非常迷失在这里，并不是真正的javascript专家。当用户点击“喜欢”或“不喜欢”时，我想显示“感谢投票”，并且“谢谢投票”这个词会自动显示而无需刷新页面。

这是我的HTML：

{% if poll.privacy == "own" and request.user.get_profile.parliment != poll.location %}
You do not have permission to vote this.
{% else %}
{% if has_vote %}
{% if poll.rating_option == '1to5' %}
<div class="rate">
<div id="poll-rate-{{ poll.pk }}"></div>
</div>
{% else %}

Thanks for your vote.
{% endif %}

{% else %}
{% if poll.rating_option == 'yes_no' %}
<a href="javascript:void(0)" class="rate btn btn-xs btn-success mr5 vote-positive" rel="{% url 'vote_vote' poll.pk 1 %}" alt="{{ poll.pk }}">Yes</a>
<a href="javascript:void(0)" class="rate btn btn-xs btn-danger vote-negative" rel="{% url 'vote_vote' poll.pk 0 %}" alt="{{ poll.pk }}">No</a>
{% elif poll.rating_option == 'like_dislike' %}
<a href="javascript:void(0)" class="rate btn btn-xs btn-success mr5 vote-positive" rel="{% url 'vote_vote' poll.pk 1 %}" alt="{{ poll.pk }}">Like</a>
<a href="javascript:void(0)" class="rate btn btn-xs btn-danger vote-negative" rel="{% url 'vote_vote' poll.pk 0 %}" alt="{{ poll.pk }}">Dislike</a>
{% elif poll.rating_option == '1to5' %}
<div class="rate">
<div id="poll-rate-{{ poll.pk }}"></div>
</div>
{% endif %}
{% endif %}
{% endif %}

这是我的javascript：

function bindVoteHandler() {
    $('a.vote-positive, a.vote-negative').click(function(event) {
        event.preventDefault();
        var link = $(this).attr('rel');
        var poll_pk = $(this).attr('alt');
        var selected_div = $(this).parent('div');
        selected_div.html('<img src="{{ STATIC_URL }}img/loading_small.gif" />');
        $.ajax(link).done(function( data ) {
            var result_div = $('div#vote-result-'+poll_pk);
            result_div.html(data);
            result_div.removeClass('vote-result-grey-out');
            selected_div.html('<small>Thanks for your vote.</small>');
        });
    });
};

$(document).ready(function() {
    bindPostCommentHandler();
    bindLoadCommentHandler();
    bindDeleteCommentHandler();
    bindVoteHandler();
    $('.show-abuse').click(function(){
        var url = $(this).attr('rel');
        $('#abuseModal .modal-body').load(url);
    });
    //load rating html
    $('#rate_list').load("{% url 'rate_list' request.session.location_parliment_id %}");
});
</script>

有没有人知道为什么我需要在Like / Vote /率之后刷新我的页面以使其显示（感谢您的投票）？ 请有人知道帮助或与我分享链接。

下面是图片：

点击前点击：

点击后点击

：

然后当我刷新浏览器时会显示单词，它会在点击Like时自动显示。

Answer 1

你应该做的是使用jQuery进行点击功能。按下投票按钮时，此脚本将显示先前隐藏的投票确认。如果你需要隐藏投票按钮我也包括在内。您显然需要用适当的类名替换您的类名。

 <style>
    .yourVoteConfirmation {
    display: none;
    }
    </style>

    <script>
    $(document).ready(function () {
        $('.yourVoteButton').click(function() {
        $('.yourVoteConfirmation').show('fast');
        // if you need to hide the vote button
        $('.yourVoteButton').css('display', 'none');

    });
    });
    </script>