Question

这是我的html。当我选择其他选项时，我想显示特定的段落。还希望在显示每个段落之前先显示一个加载器。假设我从选择中选择阿尔及利亚时，应显示第一个加载程序，几秒钟后，加载程序应隐藏并显示包含id =“ algeria”的特定段落。

<select id="oh-select">
    <option value="algeria">Algeria</option>
    <option value="australia">Australia</option>
    <option value="brazil">Brazil</option>
    <option value="brunei">Brunei</option>
    <option value="cameroon">Cameroon</option>
    <option value="canada">Canada</option>
</select>

<div id="oi-loader"> Loading</div>

<p class="nothing" id="algeria">Algeria</p>
<p class="nothing" id="australia">Australia</p>
<p class="nothing" id="brazil">Brazil</p>
<p class="nothing" id="brunei">Brunei</p>
<p class="nothing" id="cameroon">Cameroon</p>
<p class="nothing" id="canada">Canada</p>

问题是如果要在更改几秒钟后使用setTimeout（）显示段落，它将无法正常工作。但是，如果没有setTimeout（），它将只能部分运行。这是我写的jQuery：

 $(document).ready(function(){

    $("#oi-loader").hide();
    $('.nothing').hide();

    $('#oh-select').change(function() {
        $('.nothing').hide();
        $("#oi-loader").show();

        setTimeout(function() {
                $("#oi-loader").hide();
            }, 3000);

            setTimeout(function() {
                $("#" + $(this).val()).show();
            }, 4000);

        });

    });

Answer 1

将UIFont分配给变量，以通过更改其功能上下文来避免其值的更改。

$(this).val()

Answer 2

不需要两次使用setTimeout（）函数，您可以编写如下代码：

$(document).ready(function(){                
            $("#oi-loader").hide();
            $('.nothing').hide();

            $('#oh-select').change(function() {                     
                var curEle = $(this).val();
                $("#oi-loader").show();
                $('.nothing').hide();
                setTimeout(function() {
                    $("#" + curEle).show();
                    $("#oi-loader").hide();
                }, 4000);                
            });
        });

需要有关settimeout（）jQuery

2 个答案: