[英]JQuery append li & apply function to that element only
I need to append a new list element on each carriage return and just visually check against two numbers to demo success & failure. 我需要在每个回车符上附加一个新的list元素,然后仅凭视觉检查两个数字以演示成功与失败。
But each time carriage return is hit the function starts to effect the previously appended element rather than only be applied to the newly appended element. 但是每次击回车符时,函数都会开始影响先前附加的元素,而不是仅应用于新附加的元素。
How can I modify the code in the attached 'fiddle' so that it only applies functionality to the latest element being appended? 如何修改附加的“小提琴”中的代码,使其仅将功能应用于附加的最新元素? http://jsfiddle.net/KrPaj/
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');
}
};
It's a bit difficult to see what you are trying to achieve but I believe you'll just need to append the <li>
before running the code. 很难看到要实现的目标,但是我相信您只需要在运行代码之前附加
<li>
。 Currently you are trying to trigger several things before it's attached. 当前,您尝试在连接之前触发几件事。
First create it, then append it, then add your fadeIn finish code: 首先创建它,然后添加它,然后添加您的fadeIn完成代码:
$li = $('<li data-tray="'+ tray +'">'+ tray +'<span></span></li>').hide();
$('#trays-list').append( $li );
$li.fadeIn(1000, function(event) { /* code */ }
Hopefully this is what you wanted: http://jsfiddle.net/KrPaj/10/ 希望这是您想要的: http : //jsfiddle.net/KrPaj/10/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.