Question

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>

我刚刚创立，我可以＆＃34;删除＆＃34;一件物品好。但当我使用多个按钮删除大量项目时，该功能会中断，只删除我点击的最后一个元素...

我想以异步方式执行此淡出效果。（这就是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);
}

知道为什么会这样吗？以及如何解决它？

Answer 1

所以，让我们说你有一个删除按钮：

$deletebutton.on('click', function (e) {
   $(e.currentTarget).fadeOut();
});

推荐：console.log（e） - 您可以在其中找到许多其他可能有用的项目

但是如果你不想删除你点击的项目呢？

将.fadeOut更改为...

$itemtoremove.fadeOut();

Answer 2

好的，直到大量的研究，我才建立了解决方案：

当你有一堆带有删除按钮的元素时，所有按钮都会调用同一个函数：当你使用计时器时，这是一个问题，因为当你处于“等待时间”并重新执行那些计时器时，可以停止计时器的内部动作（在发出之前已经过时）。

我找到的解决方案是：将等待时间小于淡出时间，不允许内部函数停止。为什么会这样？我不知道，但你可以点击按钮，所有内部功能都可以工作。

我在这里粘贴我的代码。如果您需要更多代码来理解它，请写下它：idactual是要淡出的div的id名称。 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);

如何在onclick函数中使用javascript淡出多个元素

2 个答案: