jquery append li＆仅适用于该元素的函数

我需要在每个回车符上添加一个新的列表元素，并且只是通过目测检查两个数字来演示成功&失败。jquery append li＆仅适用于该元素的函数

但是，每次回车被击中时，函数开始影响先前附加的元素，而不是仅应用于新添加的元素。

我该如何修改所附的'小提琴'中的代码，以便它只将功能应用于正在追加的最新元素？ 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'); 
    } 
};

来源

2014-02-28 Christopher Camplin

盘仅仅是一个变量名，在小提琴解释。 –

这是一个有点难以看到你想达到什么样的，但我相信，你只需要在运行代码之前的<li>追加。目前你正试图在连接之前触发几件事情。

首先创建它，然后附加它，然后添加淡入完成代码：

$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/

来源

2014-02-28 19:42:35

jquery append li＆仅适用于该元素的函数

回答

相关问题