jQuery show hide div基于选择值加载 - 如何在此代码中添加加载元素

Question

如何在此代码中添加加载功能？任何人都要修改这个。

＆＃13;

＆＃13;

$(function() {
    $('#colorselector').change(function() {
        $('.colors').hide();
        $('#' + $(this).val()).show();
    });
});

＆＃13;

<Select id="colorselector">
    <option value="red">Red</option>
    <option value="yellow">Yellow</option>
    <option value="blue">Blue</option>
</Select>
<div id="red" class="colors" style="display:none">Ok janu i love you </div>
<div id="yellow" class="colors" style="display:none"> yellow.. </div>
<div id="blue" class="colors" style="display:none"> blue.. </div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

只需包含jQuery：

＆＃13;

＆＃13;

$(function() {
            $('#colorselector').change(function(){
                $('#loading').show();
                $('.colors').hide();
                $('#loading').hide();
                $('#' + $(this).val()).show();
            });
        });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<Select id="colorselector">
       <option value="red">Red</option>
       <option value="yellow">Yellow</option>
       <option value="blue">Blue</option>
    </Select>
    //OUTPUT 
    <div id="red" class="colors" style="display:none">Ok janu i love you </div>
    <div id="yellow" class="colors" style="display:none"> yellow.. </div>
    <div id="blue" class="colors" style="display:none"> blue.. </div>
    <div id="loading" style="display:none">Loading...</div>

＆＃13;

＆＃13;

＆＃13;