javascript - 第二次插入后文本未出现

Question

这些代码正在工作，只是对于第二次或后续插入，消息“订单已添加”没有出现。其次，在我使用弹出窗口删除所有内容并单击查看当前订单后，出现消息“目前没有客户订单”。即使执行了代码也没有出现。

    const order = [];

    const customer = {
        name: '',
        totalCups: 0
    }

    const checkCustomerOrders = () => {
        if (order.length === 0) {
            $('.Mesg').show();
            $('.Mesg').text("No customer orders at the moment.").fadeTo(4000, 0);
        }
    }

    $('#AllOrders').hide(); 

    $('#btnAdd').click(function () {
        var item = $('#customerName');

        // Data structure Queue
        order.unshift(item.val());

        // UX
        $('.Mesg').text("Order added").fadeTo(4000, 0);

        // UI
        var orderElement = $('<div class="orderItem"></div>').text(item.val());
        $('#AllOrders').append(orderElement);

        // Reset textbox
        item.val("");        

        // Optional Design        
        $('#ViewAllOrders').click();
        debugger;
    })

    $('#ViewAllOrders').click(function () {
        checkCustomerOrders();
        $('#AllOrders').show(); 
        $('#CurentOrder').hide();
    })

    

    $('#ViewCurrentOrder').click(function () {
        debugger;
        checkCustomerOrders();
        $('#AllOrders').hide(); 
        $('#CurentOrder').show();

        var top = order[order.length - 1];
        console.log(top);

        $('#CurentOrder').empty();
        // UI
        var orderElement = $('<div></div>').text(top);
        $('#CurentOrder').append(orderElement);
    })

    $('#DeliverOrder').click(function () {
        debugger
        // Remove one element from array. FIFO.
        order.pop();
        // Element removed.

        // Remove the html element as well
        $(".orderItem:first").remove();

        // UX
        $('.Mesg').text("One customer order delivered").fadeTo(4000, 0);

        // Optional Design        
        $('#ViewAllOrders').click();
    })

html{
            font-size:1em
        }

        div.Mesg {
            height: 20px !important;
        }

        ul#menu {
            display: flex;
            list-style-type: none;         
            justify-content: space-around;            
            padding: 0;
            margin: 0;
        }

        ul#menu > li {
            display: block;
        }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="menu">
                <li><a id="ViewAllOrders" href="#">View all orders</a></li>
                <li><a id="ViewCurrentOrder" href="#">View current order in process</a></li>
                <li><a id="DeliverOrder" href="#">Deliver one order</a></li>
            </ul>            
        
        <hr />
        <div class="Mesg"></div>
        <hr />
        <div id="AddOrder">
            <input id="customerName" type="text" placeholder="Enter customer's name" />
            <input id="btnAdd" type="button" value="Add" />
        </div>
        <div id="AllOrders"></div>
        <div id="CurentOrder"></div>

是否是由于 fadeTo 方法所致？

Answer 1

将 fadeTo() 更改为 fadeOut() 应该可以解决此问题

    const order = [];

    const customer = {
        name: '',
        totalCups: 0
    }

    const checkCustomerOrders = () => {
        if (order.length === 0) {
            $('.Mesg').show();
            $('.Mesg').text("No customer orders at the moment.").fadeOut(4000, 0);
        }
    }

    $('#AllOrders').hide(); 

    $('#btnAdd').click(function () {
        var item = $('#customerName');

        // Data structure Queue
        order.unshift(item.val());

        // UX
        $('.Mesg').text("Order added").fadeOut(4000, 0, function(){ 
              $('.Mesg').text('');
              $('.Mesg').show();
        });

        // UI
        var orderElement = $('<div class="orderItem"></div>').text(item.val());
        $('#AllOrders').append(orderElement);

        // Reset textbox
        item.val("");        

        // Optional Design        
        $('#ViewAllOrders').click();
        debugger;
    })

    $('#ViewAllOrders').click(function () {
        checkCustomerOrders();
        $('#AllOrders').show(); 
        $('#CurentOrder').hide();
    })

    

    $('#ViewCurrentOrder').click(function () {
        debugger;
        checkCustomerOrders();
        $('#AllOrders').hide(); 
        $('#CurentOrder').show();

        var top = order[order.length - 1];
        console.log(top);

        $('#CurentOrder').empty();
        // UI
        var orderElement = $('<div></div>').text(top);
        $('#CurentOrder').append(orderElement);
    })

    $('#DeliverOrder').click(function () {
        debugger
        // Remove one element from array. FIFO.
        order.pop();
        // Element removed.

        // Remove the html element as well
        $(".orderItem:first").remove();

        // UX
        $('.Mesg').text("One customer order delivered").fadeOut(4000, 0);

        // Optional Design        
        $('#ViewAllOrders').click();
    })