javascript - .hasClass() 对动态添加的类不起作用

Question

我目前正在使用 jQuery 编写一个简单的脚本，它会在提交完整表单之前检查所有文件(通过 AJAX 发送)是否已正确上传。所以交易是:当用户将图像放入浏览器(拖放)时，它会使用 AJAX 发送到服务器，上传完成后，它只需添加一个类“done” "到一些 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 类.

我确定我犯了一些愚蠢的错误，或者这只是我对 .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;
};