Question

我目前正在使用jQuery编写一个简单的脚本，在提交完整表单之前检查是否所有文件（通过AJAX发送）都已正确上传。因此，交易是：当用户将图像拖放到浏览器中时（拖放），使用AJAX将其发送到服务器，当上传完成后，只需添加一个类＆＃34;的完成＆＃34;到一些div标签。

因此，每当用户删除图像时，它都会添加这种div：

<div class="preview">/* blablabla other div and span classes */</div>

上传完成后，它看起来像这样：

<div class="preview done">/* blablabla other div and span classes */</div>

一切都像魅力一样，所以这里有一个有趣的部分：

<form action="target.php" method="post" enctype="multipart/form-data" 
onsubmit="return checkUploadFiles();">

它调用此JS函数以防止在一个文件尚未完全上载时提交：

function checkUploadFiles(){
    $(".preview").each(function(i, val) {
        if(!val.hasClass('done')){
            alert("Something is not fully uploaded yet, please wait");
            return false;
        };
    });
    return true;
};

但是......无论如何都会发送表单，即使现在有15张图片正在上传，15个div标签包含 .preview 类但不包含 .done < / strong> class。

我确定我做过一些愚蠢的错误，或者说我不了解 .each（）或。 hasClass（），有人可以帮忙吗？

提前致谢！

编辑：考虑到我犯的两个错误，这是修正后的脚本：

function checkUploadFiles(){ var ret = true; $(".preview").each(function() { var $this = $(this); if(!$this.hasClass('done')){ alert("Something is not fully uploaded yet, please wait"); ret = false; }; }); return ret; };

Answer 1

您将从每个循环返回false，而不是从validate方法返回，因此无论验证如何，它都将始终返回true。

同样val是dom元素引用，而不是jQuery对象，因此它没有hasClass()方法。

function checkUploadFiles() {
    if (!$(".preview").not('.done').length) {
        alert("Something is not fully uploaded yet, please wait");
        return false;
    };
    return true;
};

Answer 2

要扩展我的注释以提供Ethan方法的替代方法，您只需'jQuerify'您在每个循环中获得的dom元素，因此您的代码将如下所示：

function checkUploadFiles(){
    var isDone = true;
    $(".preview").each(function(i, val) {
        if(!$(val).hasClass('done')){
            alert("Something is not fully uploaded yet, please wait");
            isDone = false;
        };
    });
    return isDone;
};

如果您仍然需要索引值并避免任何this混淆，则此方法很有用。

编辑也解决了使用布尔变量而不是硬编码布尔值在每个循环中返回false的问题。

Answer 3

在.each中，val（和this）是DOM对象，而不是jQuery包装的对象。所以你想要的是这个：

function checkUploadFiles(){
    $(".preview").each(function() {
        var $this = $(this);
        if(!$this.hasClass('done')){
            alert("Something is not fully uploaded yet, please wait");
            return false;
        };
    });
    return true;
};

如果您在回调中执行任何操作，那么创建$this变量是一个好主意（因为您无法信任内部函数中this的值）。

动态添加的类的.hasClass（）不起作用

3 个答案: