我的页面上有一个速率按钮,使用PHP和jQuery创建。
当点击该按钮时,会在一段时间后显示并隐藏一条消息“#num voteed including you”
HTML:
div class="voting_wrapper" id="1001">
<div class="voting_btn">
<div class="up_button"> </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();
,但我正在努力添加脚本的位置和方法。任何人都可以帮助我吗?
提前致谢。
答案 0 :(得分:0)
尝试替换您的代码,
$('#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");
答案 1 :(得分:0)
之所以如此,可能是因为#message-status
元素最初位于voting_wrapper
元素之外。您可以使用.insertAfter()
#message-status
按钮下方的包装内移动.voting_btn
$('#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"> 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);