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;
}​

Jクエリ:

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 が表示されます。

私の質問: 最初のクリックで 2 つの要素 (つまり、正しい合計) をカウントするようにするにはどうすればよいですか?

フィドル: http://jsfiddle.net/a6mx2/

4

1 に答える 1

1

私のフィドルを参照してください

コードが再計算部分にドロップアウトするまでに DOM の更新は行われません。

アニメーション関数内で再カウントを移動すると、正しい合計が表示されます。

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

したがって、DOM 更新の「スレッド化」の問題があります。

于 2012-12-21T14:59:38.697 に答える