javascript - 如何先隐藏 Div 然后在选择选项后显示
问题描述
我在选择选项中有一个国家列表,并且有费用属性,当我们选择一个国家时,我们会在一个 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>
解决方案
在您的代码中,您永远不会隐藏#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);
});
});
推荐阅读
- elasticsearch - elasticsearch 比索引(索引)更老
- angular - 蓝牙串行写入在 Ionic - v4 中不起作用
- php - 从 PHP 获取 MySQL 字符串时不相等的二进制字符比较
- c++ - 如何解决 *** `./key_server' 中的错误:free():invalid pointer: 0x00007f361a97b6e8 in c++
- c# - C# IntelliSense 在 Visual Studio Community 2017 和 Unity 中不起作用
- teradata - tdstats.UDFCONCAT 参数 varchar 限制
- android - No solution works for handling of NetworkOnMainThreadException
- vb.net - how can i create dynamically flowlayoutpanels and tabpages in my form
- c++ - 在 C++ 中初始化列表列表
- javascript - 如何访问通过管道传输到 feedparser 的请求的响应标头