javascript - 如何先隐藏 Div 然后在选择选项后显示

Question

我在选择选项中有一个国家/地区列表，并且有费用属性，当我们选择一个国家/地区时，我们会在 div 中显示费用。

我们想要的是，当我们选择任何选项时，它应该隐藏已经显示的 div 一秒钟，然后我们显示预加载器，然后再次显示它，当我们更改选项时，它应该再次执行相同的操作。

我的选择选项在这里

<select class="form-control-input" name="from" id="visitorcountry" onclick="removeError(this.id);">

    <option value="" disabled selected>Select your Nationality</option>
    <option data-price="ALB" data-cl="+355" data-fee="60" value="Albania" >Albania</option>
    <option data-price="AND" data-cl="+376" data-fee="60" value="Andorra" >Andorra</option>
    <option data-price="AGO" data-cl="+244" data-fee="60" value="Angola" >Angola</option>
    <option data-price="ATG" data-cl="+1-268" data-fee="60" value="Antigua and Barbuda" >Antigua and Barbuda</option>
    <option data-price="ARG" data-cl="+54" data-fee="0" value="Argentina" >Argentina</option>
    <option data-price="ARM" data-cl="+374" data-fee="60" value="Armenia" >Armenia</option>
    <option data-price="AWB" data-cl="+297" data-fee="60" value="Aruba" >Aruba</option>
    <option data-price="AUS" data-cl="+61" data-fee="60" value="Australia" >Australia</option>
    <option data-price="AUT" data-cl="+43" data-fee="60" value="Austria" >Austria</option>
    <option data-price="AZE" data-cl="+994" data-fee="60" value="Azerbaijan" >Azerbaijan</option>

</select>

这是叠加层和价格显示部分

<div class="row" id="totalcostrow" style="display:none;" >         
    Total Cost : USD <span id="totalcost" style="float:none"></span>                                             
</div>


<div class="preloader" style="display:none;" id="overlay"> 
   <img src="../cassets/images/loader.gif" width="32" height="32" class="loader" alt="loader" title="Loader" /> 
</div> 

这是脚本部分

<script>

$(function() {
    $("#visitorcountry").change(function(){
        $('#overlay').show().delay(3000).hide("slow");
        var element = $(this);
        var option = $('option:selected', this).attr('data-fee');
        var processing = 39;
        var finalcost = parseInt(option) + parseInt(processing);

        $('#totalcost').html(finalcost);
        $('#totalcostrow').show();

    });
});

</script>

Answer 1

在您的代码中，您永远不会隐藏 #totalcostrow div。我建议像这样使用 setTimeout :

$(function() {
    $("#visitorcountry").change(function(){
        $('#totalcostrow').hide(); //hide cost info
        var overlay = $('#overlay');  
        var element = $(this);
        overlay.show(); //show preloader
        setTimeout(function(){
            var option = $('option:selected', element).attr('data-fee');
            var processing = 39;
            var finalcost = parseInt(option) + parseInt(processing);
            overlay.hide(); //hide preloader
            $('#totalcost').html(finalcost);
            $('#totalcostrow').show(); //show cost info
        }, 3000);
    });
});