javascript - 用Javascript取代CSS类？

与上一个问题类似，但我放弃了以后再决定的决定，现在情况有所不同，因为我使用的是jQuery。我的网站上有一个dropzone，对于图像文件，我希望有一个边框阴影，但是对于文件，我不想要一个阴影。可以删除多个文件，并且预览以内联方式显示，所以说，如果删除了2张图像和1个文件，我希望两个图像都带有阴影，而不是文件预览框。我制作了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影响这些类的范围的真正愚蠢的东西，但是有一种方法可以只为该实例更改类，而不必弄混之前的所有内容，还是我需要运行更多检查并手动添加该类？

最佳答案

无法在评论中发布代码，因此我将其作为答案。
由于.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);
}

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

关于javascript - 用Javascript取代CSS类？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/22029567/