我的页面上有一个费率按钮,是用PHP和jQuery创建的。
单击按钮时,会显示一条消息,并在一段时间后隐藏"#num 投票包括您"
.HTML:
div class="voting_wrapper" id="1001">
<div class="voting_btn">
<div class="up_button"> </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"> 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");