0

我有一个我正在处理的页面，并且正在尝试fadeIn和fadeOut特定div的 s。但是，当我div使用:first选择器淡入淡出时，我只得到父div项，没有一个子项。

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在 child divs 上。

 <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 代码创建的 child 有关？我查看了:first-child选择器，但这似乎只影响多个父母的第一个孩子，而不是第一个父母的所有孩子。我还假设孩子们会自动效仿。我在这里做错了什么，我应该如何修复我的代码，以便所有的孩子都div id="example_wrapper" fadeIn使用它？谢谢！

更新

只是想包含我修改后的代码，因为我已经让它工作了。仍然需要进行一些调整，但孩子div的问题已经完全解决。正如@Ben Felda 所说，这些元素还不存在。我所做的是向函数添加一个callback函数，该dataTable函数强制fadeInandfadeOut效果和属性更改等到divs 完全形成。

$(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 回答