0

作業中のページがあり、特定のページを作成しようとしていfadeInます。ただし、セレクターを使用してフェードインすると、親のみが取得され、子は取得されません。fadeOutdivdiv:firstdiv

Javascript（Jquery）：

$(document).ready(function () {
                setupLeftMenu(); //creates nav menu
                autoHeight(); //auto scales content
                $('.datatable').dataTable(); //creates sortable table, injects divs that are not showing up when 'fadeIn' is used.
                $('#outer div').hide();
                $('.submenu li:first').attr('id','current');
                $('#outer div:first').fadeIn('slow');
                $('.submenu li a').click(function() {
                    var top = $(this);
                    $('#outer div').fadeOut('slow');
                    $('.submenu li').attr('id','');
                    $(this).parent().attr('id','current');
                    $('#' + $(top).attr('name')).fadeIn('slow');

                    }); 
                });

そして、これは私がお返しに受け取るHTMLコードです。display:none子のに注意してくださいdiv。

 <div class="dataTables_wrapper" id="example_wrapper" style="display: block;">
   <div id="example_length" class="dataTables_length" style="display: none;"> 
     <label>Show 
       <select size="1" name="example_length">
         <option value="10" selected="selected">10</option>
         <option value="25">25</option><option value="50">50</option>
         <option value="100">100</option>
       </select>
        entries
     </label>
   </div>
   <div class="dataTables_filter" id="example_filter" style="display: none;">
     <label>Search: 
       <input type="text">
     </label>
   </div>
 </div>

divこれは、他のJavascriptコードによって作成されている子と関係がありますか？セレクターを調べました:first-childが、最初の親のすべての子ではなく、複数の親の最初の子にのみ影響するようです。私はまた、子供たちが自動的に追随すると思いました。ここで何が間違っているのでしょうか。また、コードを修正して、すべての子がコードを使用できるようにするにはどうすればよいdiv id="example_wrapper" fadeInですか。ありがとう！

アップデート

動作するようになったので、改訂したコードを含めたかっただけです。まだいくつかの調整が必要ですが、子divの問題は完全に解決されています。@Ben Feldaが言ったように、要素はまだ存在していませんでした。私がしたことは、callback関数に関数を追加して、効果と属性の変更をsが完全に形成されるまで待機するようdataTableに強制することでした。fadeInfadeOutdiv

$(document).ready(function () {
                setupLeftMenu();
                autoHeight();
                $('#outer div').hide();
                $('.submenu li:first').attr('id','current');
                $('#outer div:first').fadeIn('slow');
                var dbCallBack = $('.submenu a').click(function() {
                                    var top = $(this);
                                    $('#outer div').fadeOut('slow', function() {
                                        $('.submenu li').attr('id','');
                                        $(top).attr('id','current');
                                        $('#' + $(top).attr('name')).fadeIn('slow');
                                    });                         
                                }); 
                $('.datatable').dataTable(dbCallBack);                  
                });
4

1 に答える 1

1

他の機能を見ずに言うのは難しいですが、要素がまだ存在しないという問題に直面しているかもしれません。要素の長さプロパティをログに記録して、そこにあるかどうかを確認してください。

console.log($('.submenu li:first').length)

あなたのコメントによると、要素はまだ存在していないようです。これが私がすることです：コールバックパターンに基づいてコードをリファクタリングします。一言で言えば、クリックイベントを別の関数に引き出し、その関数名を呼び出しで渡して要素を構築する必要があります。とても便利なパターン！

于 2013-01-22T00:45:11.943 に答える