0

ボタンを変更して、プロセスが実行中であることを示す背景を表示したいと考えています。
ただし、これを実行すると、ボタンの色が変わりますが、検索が完了するまで回転する画像が背景として適用されません。これを修正するには、別のことをする必要がありますか?

               $("#btnFind").button().click(function () {
                    $('#btnFind').toggleClass('loadinggif btnStyle');

                    var filterVal = $('#tags').val();


                    if (filterVal != "") {
                        $('#MainContent_myTable tr:gt(0)').each(function () {
                            $(this).find('td:eq(0)').not(':contains(' + filterVal + ')').parent().hide();
                        });
                    }

                    $('#btnFind').toggleClass('loadinggif btnStyle');
                });
4

2 に答える 2

4

この.toggleClass関数は、 でアクセスできる遅延オブジェクトを返し、関数をそのメソッド.promise()にバインドします。.done()

$("#btnFind").button().click(function () {

    $("#btnFind").toggleClass('loadinggif btnStyle').promise().done(function() {

        var filterVal = $('#tags').val();

        if (filterVal != "") {
            $('#MainContent_myTable tr:gt(0)').each(function () {
                $(this).find('td:eq(0)').not(':contains(' + filterVal + ')').parent().hide();
            });
        }

        $('#btnFind').toggleClass('loadinggif btnStyle');
    });

});
于 2013-09-06T16:15:25.587 に答える
1

ブラウザタブは単一スレッドアプリケーションのように機能し、いつでも js スクリプトの実行、変更による dom の再描画などのタスクが 1 つしか実行されないため、そのようには機能しません。

この場合、ボタンがクリックされると、クラスがボタンに追加されますが、イベント ハンドラーの実行が完了していないため、ブラウザーは dom の変更を UI に更新する時間がありません。次の回避策では、ブラウザーに再描画スレッドを実行させようとします。toggleClass使用後にスクリプトを遅らせることによる時間setTimeout

あなたは試す必要があります

$("#btnFind").button().click(function () {
    $('#btnFind').toggleClass('loadinggif btnStyle');

    setTimeout(function){
        var filterVal = $('#tags').val();


        if (filterVal != "") {
            $('#MainContent_myTable tr:gt(0)').each(function () {
                $(this).find('td:eq(0)').not(':contains(' + filterVal + ')').parent().hide();
            });
        }

        $('#btnFind').toggleClass('loadinggif btnStyle');
    })
});
于 2013-09-06T16:05:57.303 に答える