Question

与之前的问题类似，但我放弃了，后来决定再回到它，现在情况有所不同，因为我正在使用jQuery。我在我的网站上有一个dropzone，对于图像文件，我希望有一个边框阴影，但对于我不想要的文件。可以删除多个文件，并且预览显示为内联，因此，如果删除了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")

    }



});

它最初起作用 - 但出错了。我放下了两个图像，它们的阴影边框很好，但是当我放下一个文件时，它会丢失它的阴影，这就是我想要的 - 但是在它之前丢弃的两个图像也是如此。如果我删除另一个图像，它将再次获得它的阴影，但之前的元素不会改变。我知道我在这里遗漏了一些关于JS如何影响这些类的范围真的很蠢，但有没有办法改变JUST那个实例的类，而不是弄乱它之前的所有东西，或者我是否需要运行更多的检查然后手动添加课程？

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

因此，您无需添加和删除，只需执行删除即可。

用Javascript替换CSS类？

1 个答案: