как затухать несколько элементов с помощью JavaScript в функции onclick
Пользователи SOF: сегодня у меня есть еще один вызов для вас:
У меня есть этот кусок кода, часть jquery Uploader. Каждый загруженный файл использует этот код, где я создаю правильный ответ, если файл был загружен нормально или нет.
Когда файл загружен нормально, я помещаю кнопку удаления (здесь нельзя использовать тег формы). Я хочу добавить эффект затухания.
РЕДАКТИРОВАТЬ: теперь все интересный код.
<script>
var conexion;
var numarch = 0;
var idactual = 0;
function crearXMLHttpRequest(){
var xmlHttp=null;
if (window.ActiveXObject)
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
else
if (window.XMLHttpRequest)
xmlHttp = new XMLHttpRequest();
return xmlHttp;
}
function borrar_archivo(iddiv, ruta, header){
conexion=crearXMLHttpRequest();
idactual = iddiv;
conexion.onreadystatechange = procesarEventos;
conexion.open(header, ruta, true);
conexion.send(null);
}
function procesarEventos(){
var detalles = document.getElementById(idactual);
if(conexion.readyState == 4){
var resultado = conexion.responseText;
if(resultado.indexOf("true")!=-1){
nomArchivo = conexion.responseText.split(":",1);
nombreArchivo = nomArchivo[0].substring(1);
detalles.innerHTML = "<p style='float: left; clear:left; color: #66CC00; font-size:12px;'>"+nombreArchivo+" ha sido borrado.";
}
else{
detalles.innerHTML = "<p style='float: left; clear:left; font-size:12px;' class='text-danger'>Ha habido un error al borrar el archivo.</p>";
}
}
else{
detalles.innerHTML = "<p style='float: left; clear:left; font-size:12px;'>Cargando...</p>";
}
setInterval(function(){
$("#"+idactual).fadeOut(1000);
},1500);
}
$(function(){
$('#fileupload').fileupload({
dataType: 'json',
done: function (e, data){
$.each(data.result.files, function (index, file) {
numarch++;
$('<div id="archivo_'+numarch+'" />').appendTo('#files');
if (file.error){
$('<img style="width: 16px; float: left; clear:left; margin-right: 10px;" src="img/x.png" title="Error" alt="Error"/>').appendTo('#archivo_'+numarch);
$('<p style="float: left; font-size:12px;" class="text-danger"/>').text(file.error).appendTo('#archivo_'+numarch);
}
else{
var newFileDiv = $("<img style='width: 16px; float: left; clear:left; margin-right: 10px;' src='img/v.png' title='Archivo subido OK' alt='Archivo subido OK'/><p style='float: left; color: #66CC00; font-size:12px;'>"+file.name+"</p><div style='float :left; height: 5px;margin-left: 25px;' class='btn btn-danger delete' onclick=borrar_archivo('archivo_"+numarch+"','"+file.deleteUrl+"','"+file.deleteType+"')><i style='top: -5px;left: -5px;' class='glyphicon glyphicon-trash'></i><span style='top: -6px;position: relative;'>Borrar</span></div>");
$('#archivo_'+numarch).append(newFileDiv);
}
});
},
progressall: function (e, data){
var progress = parseInt(data.loaded / data.total * 100, 10);
$('#progress .progress-bar').html(progress + '%');
$('#progress .progress-bar').css('width',progress + '%');
}
});
});
</script>
Я только что обнаружил, что могу «удалить» один элемент, хорошо. но когда я использую несколько кнопок для удаления большого количества элементов, функция прерывается, удаляя только последние элементы, которые я нажала …
Я хочу сделать этот эффект затухания асинхронным (это причина для setInterval вместо setTimeout) …
Но у меня ничего не работает. Теперь я немного растерялся по этому поводу.
Любая помощь, пожалуйста?
РЕДАКТИРОВАТЬ 2:
Теперь я пытаюсь найти способ удалить 2 или более элементов, но эффект fadeout () работает только для первого:
function borrar_archivo(iddiv, ruta, header){
conexion=crearXMLHttpRequest();
idactual = iddiv;
conexion.onreadystatechange = procesarEventos;
conexion.open(header, ruta, true);
conexion.send(null);
setInterval(function(){
$("#"+idactual).fadeOut(1000);
},1500);
setInterval(function(){
$("#"+idactual).remove();
},1000);
}
Есть идеи, почему это случилось? и как это решить?
Решение
Допустим, у вас есть кнопка удаления:
$deletebutton.on('click', function (e) {
$(e.currentTarget).fadeOut();
});
Рекомендуется: console.log (e) — там вы можете найти много других предметов, к которым вы можете получить доступ, которые могут быть полезны
Но что, если вы не хотите удалять элемент, на который щелкнули?
менять .fadeOut чтобы …
$itemtoremove.fadeOut();
Другие решения
Хорошо, пока много исследований, я не нашел решение:
Когда у вас есть набор элементов с кнопкой «Удалить», все кнопки вызывают одну и ту же функцию: это проблема, когда вы работаете с таймерами, потому что, когда вы находитесь в «времени ожидания» и вы повторно запускаете эти таймеры, внутренние действие таймера может быть остановлено (перезаписано перед отправкой).
Решение, которое я нашел, заключается в следующем: поместите время ожидания меньше, чем время затухания, не позволяя остановить внутреннюю функцию. Почему это работает? Я не знаю, но вы можете нажать кнопки, и все внутренние функции работают.
Я вставляю сюда свой код. Если вам нужно больше кода, чтобы понять это, напишите его: idactual — это имя идентификатора div, который должен исчезнуть. numarc — это число, используемое для идентификации каждого div: (например: idactual = archivo_1, numarch = 1)
setInterval(function(){
$("#"+idactual).fadeOut(1500, function(){
var i=0;
for(i=1;i>numarc;i++){
elemento=$(document).getElementById("archivo_"+i);
texto = elemento.innerHTML;
if(texto.indexOf("borrado")!=-1){
elemento.remove();
}
}
});
},100);
detector