我有一个功能:
function removeDiv() {
var topmost = jQuery('.xx');
var totContent = topmost.find('.zz').length;
var $target = jQuery('.xx').find('.zz').eq(0);
if(totContent > 5) {
$target.hide('slow', function(){ $target.remove(); });
}
}
我在我的ajax调用中使用它,删除额外的div然后有超过5,hovewer它只删除第一个div一次!
这就是ajax调用的样子:
function saveClubs(array) {
for(i=0; i<array.length; i++) {
var id = array[i];
jQuery.ajax({
type: "GET",
async: true,
url: 'index.php?option=com_events&task=club.save&id=' + id,
dataType: 'json',
success: function(data) {
jQuery('.xx').append('<div class="zz">'+data+'</div>');
removeDiv();
}
});
}
}
有什么想法吗?
答案 0 :(得分:3)
这是Paul Roub的回答,张贴为答案而不是comment:
可能的问题是,由于你在一个循环中做了一堆ajax调用,它们往往会同时完成,所以你最终会重复淡出相同的元素(因为它一直存在,直到它完成褪色)。
最小化更改修复将是,例如,当您淡出时添加一个类:
function removeDiv() {
// Get the container (I take it there's only one .xx element)
var topmost = jQuery('.xx');
// Get the child elements that aren't fading
var zz = topmost.find('.zz').not('.fading');
// Too many?
if(zz.length > 5) {
// Yup, add 'fading' to the first one and fade it out
// Note that there's no need for the $target variable
zz.eq(0).addClass('fading').hide('slow', function(){ $(this).remove(); });
}
}
答案 1 :(得分:1)
问题在于:
var $target = jQuery('.xx').find('.zz').eq(0);
总是0 index
。
function removeDiv(x) {
var topmost = jQuery('.xx');
var totContent = topmost.find('.zz').length;
var $target = jQuery('.xx').find('.zz').eq(x);
if(totContent > 5) {
$target.hide('slow', function(){ $target.remove(); });
}
}
function saveClubs(array) {
for(i=0; i<array.length; i++) {
var id = array[i];
jQuery.ajax({
type: "GET",
async: true,
url: 'index.php?option=com_events&task=club.save&id=' + id,
dataType: 'json',
success: function(data) {
jQuery('.xx').append('<div class="zz">'+data+'</div>');
removeDiv(i);
}
});
}
}
注意强>
在上面的小提琴中,尝试将此var $target = jQuery('.xx').find('.zz').eq(x);
更改为将x
的值更改为 0 ,并且只会发生一次。