Question

我需要在每个回车符上附加一个新的列表元素，然后直观地检查两个数字以演示成功＆amp;故障。

但是每次回滚时，函数都会开始影响前面附加的元素，而不是只应用于新添加的元素。

如何修改附加的'小提琴'中的代码，使其仅将功能应用于附加的最新元素？ http://jsfiddle.net/KrPaj/

    var addTray = function(tray) {
    /*
        Add the given tray to the list.

        If this tray already exists, it will be highlighted and no items
        are added.

    */
    if (!findTrayInList(tray).length) {
        $('#trays-list li.empty').detach();
       // $('input#id_tray').prop('disabled', true);
        $('#trays-list').append($('<li data-tray="'+ tray +'">'+ tray +'<span></span></li>').hide().fadeIn(1000, function(event) {
            var number1 = 1 + Math.floor(Math.random() * 2); 
            var number2 = 1 + Math.floor(Math.random() * 2);   
            console.log(number1 + ' ' + number2)
            currentTray = $(this);
            console.log(currentTray);
            currentTray.map(function(e) {

                currentTray.each(function() {

                    if(number1 === number2)
                    {
                        currentTray.addClass('green').animate({ 
                            color:"#00FF00"
                        }, 1000)
                        currentTray.delay(1000).fadeOut(300, function() {
                            currentTray.remove();
                            //$('input#id_tray').prop('disabled', false);

                        });

                    }
                    else
                    {
                        currentTray.addClass('red').animate({ color:"red" }, 1000, function() {
                            if(currentTray.children('span').is(':empty'))
                                currentTray.children('span').append(' failed');
                               // $('input#id_tray').prop('disabled', false);
                        });
                    }
                });
            }).get();

        }));
        updateHeading();
        //trayCheck();
    } else {
        findTrayInList(tray).css('color', 'red').animate({color: '#333'}, 'slow');
    }
};

Answer 1

看到你想要实现的目标有点困难，但我相信你只需要在运行代码之前附加<li>。目前，您正试图在连接之前触发几件事。

首先创建它，然后追加它，然后添加你的fadeIn完成代码：

$li = $('<li data-tray="'+ tray +'">'+ tray +'<span></span></li>').hide();

$('#trays-list').append( $li );

$li.fadeIn(1000, function(event) { /* code */ }

希望这就是你想要的：http://jsfiddle.net/KrPaj/10/

JQuery追加li＆amp;仅将函数应用于该元素

1 个答案: