多个 dropzone.js css 样式答案

【问题标题】：multiple dropzone.js css styling多个 dropzone.js css 样式
【发布时间】：2019-05-10 17:56:49
【问题描述】：

这是我第一次使用 dropzone.js

我有一个 HTML 注册向导，其中包含 3 个步骤中的多个 Dropzone.js，一个出现在第一步，将 css 应用于所有 dropzone 类.dropzone 第一个 dropzone 的样式正确，但其余的不是。

在标题上我添加了指向 dropzone css 的链接

     <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}"></link>
 <link rel="stylesheet" href="{{ url_for('static', filename='css/dropzone.css') }}"></link>

我的 HTML 文件：

<form id="fzoneForm" class="fzone" action="/upload" method="post">
  <div class="_dropzone">General Info:
<!--- some forms input and lables here -->
  </div>
</form>
<form id="dropzoneForm" class="dropzone" action="/upload" method="post"> 

<!-- upload form 1-->
</form>

    <form id="fzoneForm2" class="fzone" action="/upload" method="post">
  <div class="_dropzone">General Info:
<!--- some forms input and lables here -->
  </div>
</form>
<form id="dropzoneForm2" class="dropzone" action="/upload" method="post"> 

<!-- upload form 2-->
</form>

<form id="fzoneForm3" class="fzone" action="/upload" method="post">
  <div class="_dropzone">General Info:
<!--- some forms input and lables here -->
  </div>
</form>
<form id="dropzoneForm3" class="dropzone" action="/upload" method="post"> 

<!-- upload form 3-->
</form>


 <script>


 Dropzone.autoDiscover = false;

var dz1 = new Dropzone(
    '#dropzoneForm',
    {
        url : "upload",
        autoProcessQueue: false ,
        paramName: 'file',
        addRemoveLinks: true,
        dictDefaultMessage: 'Drop ID',
        acceptedFiles:".png,.jpg,.gif,.bmp,.jpeg",
        init: function(){
          var submitButton = document.querySelector('#uploadID');
          myDZ = this;
          submitButton.addEventListener("click",function(){
            myDZ.processQueue();});}});

var dz2 和 dz3 的类似代码

步骤由两个按钮 next 和 previous 更改，我已使用 javascript 添加但无需在此处添加。

他们每个人基本上都在同一页面上，但display:none 除非这是正确的一步

问题只是第一个 Dropzone 的样式正确，其他两个都搞砸了我检查了Dropzone.css，我可以看到它应该应用于所有类，而不仅仅是第一个类，公平地说，它看起来像，但虚线矩形就像左边的 2 条虚线，那就是它，只有第一个 dropzone 被渲染为一个宽度为 90% 的完整矩形。

【问题讨论】：

标签： javascript html css dropzone.js

【解决方案1】：

我终于弄明白了，这实际上是由我的 javascript 代码引起的，dropzone 的 display 属性在我的 javascript 中是 inline 就像这样 display:inline

我已通过将 javascript 文件中的显示属性更改为 display:block 来修复它

【讨论】：