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;
};