0

我有一个 div wrapper_显示 jquery 的结果

<div id='ico_wait' class="ico_wait" style='display: none;' >
     <img src ="img/ico_wait.gif" /> 
</div>


<div id='wrapper_' style='display: none;'>  
</div>

在jQuery中

 $(document).ready(function () {
     $('#other_stuff').click(function () {
         //show image
         jQuery('#ico_wait').fadeToggle();
         //DO STUFF
         jQuery('#ico_wait').hide();
         //ADD INFO GOTTEN IN WRAPPER
         jQuery('#wrapper_').show();
         jQuery('#wrapper_').html("<b><p style='color:#5b5b5b; float:left; margin-top:0px; padding-top:20px;'>  </p> </b><br/> <br/> ");
     });
 })

如何添加 

<div id='ico_wait' class="ico_wait" style='display: none;' >
     <img src ="img/ico_wait.gif" /> 
</div>

里面的包装器_？所以它包含在div中？我的意思是，我想在执行代码时只显示图像而不是所有 div，当我完成获取结果然后隐藏图像并显示整个 div？

4

2 回答 2

1

如果我理解正确，您应该执行以下操作：

<div id='wrapper_' style='display: none;'>  
    <div id='ico_wait' class="ico_wait" >
        <img src ="img/ico_wait.gif" /> 
    </div>
</div>

JS：

$(document).ready(function () {
    $('#other_stuff').click(function () {
        //show image when stuff inside wrapper is being populated
        $('#wrapper_').show();
        //DO STUFF
        //ADD INFO IN WRAPPER when its ready and hide image
        $('#wrapper_ #ico_wait').fadeToggle();
        $('#wrapper_').html("<b><p style='color:#5b5b5b; float:left; margin-top:0px; padding-top:20px;'>  </p> </b><br/> <br/> ");
    });
});
于 2013-03-29T17:55:36.363 回答
0

我认为最好的方法是：

CSS

.hide {
    display: none;
}

HTML

<div id='wrapper_'> 
    <div id='ico_wait' class="ico_wait" class="hide" >
        <img src ="img/ico_wait.gif" /> 
    </div>
</div>

jQuery

$(document).ready(function() {
    $('#other_stuff').click(function(){
             //show image
             jQuery('#ico_wait').removeClass('hide'); // Use of CSS Styles to do any animation for fading
             //DO STUFF
             jQuery('#ico_wait').addClass('hide');     
             //ADD INFO GOTTEN IN WRAPPER
             jQuery('#wrapper_').html("<b><p style='color:#5b5b5b; float:left; margin-top:0px; padding-top:20px;'>  </p> </b><br/> <br/> ");


        });
});

我更喜欢让 CSS 引擎对 HTML 进行任何样式更新和更改，这应该在另一个线程上运行，而不是同一个 JavaScript 执行线程，这样动画就可以在 JavaScript 运行时顺利进行。

您也可以仅使用 jQuery 进行内容交换，但不确定推荐的效果如何。

jQuery

$(document).ready(function() {
    $('#other_stuff').click(function(){
             //show image
             jQuery('#wrapper_').html("<img src='img/ico_wait.gif' />");
             //DO STUFF
             jQuery('#wrapper_').html("<b><p style='color:#5b5b5b; float:left; margin-top:0px; padding-top:20px;'>  </p> </b><br/> <br/> ");


        });
});

如果您在长时间运行的代码中遇到异步问题，您可以使用类似：jQuery Async 来帮助http://mess.genezys.net/jquery/jquery.async.php

希望这可以帮助。

于 2013-03-29T18:17:27.190 回答