好的,我有以下HTML:
<a href="#" onclick="bump_add('.$fetch['photo_id'].')">
<img id="bump_img" src="img/bump.png"/>
</a>
目前我的Javascript / Ajax看起来像这样:
function bump_add(photo_id) {
$.post('php/bump_add.php', {photo_id:photo_id}, function(data){
if (data='success') { //Handled by PHP
bump_get(photo_id);
toggle_visibility('bump_img')
} else {
alert(data);
}
});
}
function bump_get(photo_id) {
$.post('php/bump_get.php', {photo_id:photo_id}, function(data){
$('#photo_'+photo_id+'_bumps').text(data); //Handled by PHP
});
}
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block') {
e.style.display = 'none';
}
}
我对Javascript并不擅长,所以我不完全确定如何实现我的目标。
我要做的是在'onclick'事件(有效)上运行bump_add()函数,然后运行bump_get()函数(也可以)。但是最后运行toggle_visibility()函数,这个位不起作用。
关于我做错了什么的任何想法? toggle_visibility()的Javascript函数是不正确的,还是我只是错误地使用它?它的目的是使用'bump_img'id隐藏img。
答案 0 :(得分:1)
查看queue,其工作原理如下:
var div = $("div");
function runIt() {
div.show("slow");
div.animate({left:'+=200'},2000);
div.slideToggle(1000);
div.slideToggle("fast");
div.animate({left:'-=200'},1500);
div.hide("slow");
div.show(1200);
div.slideUp("normal", runIt);
}
function showIt() {
var n = div.queue("fx");
$("span").text( n.length );
setTimeout(showIt, 100);
}
runIt();
showIt();
这是demo
答案 1 :(得分:0)
此外,您应该使用承诺,例如:
function bump_add(photo_id) {
$.post('php/bump_add.php', {photo_id:photo_id}, function(data){
if (data='success') { //Handled by PHP
bump_get(photo_id).done(function(){
toggle_visibility('bump_img');
});
} else {
alert(data);
}
});
}
function bump_get(photo_id) {
var promise = $.post('php/bump_get.php', {photo_id:photo_id}, function(data){
$('#photo_'+photo_id+'_bumps').text(data); //Handled by PHP
});
return promise;
}
function toggle_visibility(id) {
$('#' + id).slideToggle(); // just an example.
}
想法是bump_get将返回一个promise,你可以在bump_add函数中使用它。
有关详细信息,请参阅:jQuery deferreds and promises - .then() vs .done()和http://api.jquery.com/promise/
此外,由于您使用jquery,请在toggle_visibility
函数中使用它,请参阅我更新它的方式。