javascript - 用 Javascript 替换 CSS 类？

Question

与之前的问题类似，但我放弃了这个问题并决定稍后再回来，现在情况有所不同，因为我使用的是 jQuery。我的网站上有一个拖放区，对于图像文件，我希望有边框阴影，但对于文件，我不想要。可以拖放多个文件并且内联显示预览，所以说如果拖放了 2 个图像和一个文件，我希望两个图像都有阴影，但文件预览框不会。我制作了 2 个 CSS 类，除了阴影之外完全相同:

.dz-preview {
    background: transparent;
    position: relative;
    display: inline-block;
    margin: 40px;
    vertical-align: top;
    border: 1px solid transparent;
    padding: 10px 13px 10px 10px;
    -webkit-box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.16);
    box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.16);
}
.dz-preview-noshadow {
    background: transparent;
    position: relative;
    display: inline-block;
    margin: 40px;
    vertical-align: top;
    border: 1px solid transparent;
    padding: 10px 13px 10px 10px;
}

最简单的方法似乎是使用 jQuery，无论如何我都在元素中使用它，所以我做了这个(.dz 预览是默认类):

mydropzone.on("addedfile", function(file) {
    if (!file.type.match(/image.*/)) {
        $('.dz-preview').addClass('dz-preview-noshadow').removeClass('dz-preview');

        mydropzone.emit("thumbnail", file, "http://i.local.dev:5000/jLNutaV.png")

    }



});

它最初有效，但出错了。我放下 2 个图像，它们的阴影边框很好，但是当我放下一个文件时，它失去了阴影，这正是我想要的 - 但在它之前放置的两个图像也是如此。如果我放下另一张图片，它会再次获得它的阴影，但之前的元素不会改变。我知道我在这里遗漏了一些关于 JS 如何影响这些类的范围的非常愚蠢的东西，但是有没有办法只为那个实例更改类，而不会混淆它之前的所有内容，或者我是否需要运行更多检查并手动重新添加类(class)？

Answer 1

无法在评论中发布代码，所以我将其作为答案。由于 .dz-preview 和 .dz-preview-noshadow 共享很多相同的代码，你可以有一个只包含阴影的类。例如:

.dz-preview {
    background: transparent;
    position: relative;
    display: inline-block;
    margin: 40px;
    vertical-align: top;
    border: 1px solid transparent;
    padding: 10px 13px 10px 10px;
}
.shadow {
    -webkit-box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.16);
    box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.16);
}

因此，除了添加和删除之外，您还可以执行删除。