1

这个想法很简单；首先将一个类添加到某些 div，然后使用单击功能删除元素类中的 1 个并重新计算总类。但是在删除旧类并添加新类时，我想使用动画。

HTML：

   <div>1</div>
   <div>2</div>​

CSS：

.divclass{
    width:200px;
    height: 200px;
    border: 1px solid #000000;
    background: #ffffff;
}

.divclass2{
    width: 250px;
    height: 250px;
    background: #000000;
}​

查询：

var div = $('div').eq(0);
var div2 = $('div').eq(1);

div.addClass('divclass');
div2.addClass('divclass2');

var totaldivclass = $('.divclass').size();
var totaldivclass2 = $('.divclass2').size();

alert(totaldivclass);
alert(totaldivclass2);    

$('.divclass2').click(function(){
$('.divclass2').animate({
    'width':'200px',
    'height':'200px',
    'background':'#ffffff'
}, function(){$('.divclass2').removeClass('divclass2').addClass('divclass')});

//recount total classes
totaldivclass = $('.divclass').size();

alert(totaldivclass);
});​

这很有效，不是我想要的方式：第一次点击它会做动画，然后它应该添加和删除类。然后，它应该重新计算课程并提醒总数。

它完成了所有这些，但是在第一次单击时，它将所有当前类都计为 1。但是第二次单击显示 2..

我的问题：我如何让它工作，以便在第一次点击时计算 2 个元素（所以正确的总数）？

小提琴：http: //jsfiddle.net/a6mx2/

4

1 回答 1

1

看我的小提琴

当代码退出到重新计算部分时，DOM 更新还没有完成。

在 animate 函数中移动重新计数，然后显示正确的总数。

 function(){        
        $(this).removeClass('divclass2').addClass('divclass')
        totaldivclass = $('.divclass').size();  
        alert(totaldivclass);  });

所以你有一个 DOM 更新“线程”问题。

于 2012-12-21T14:59:38.697 回答