多个dropzone.js样式

Question

这是我第一次使用dropzone.js

我有一个超文本标记语言注册向导与多个Dropzone.js在3个步骤中，一个出现在第一步应用到所有的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，我可以看到它应该应用于所有的类，而不仅仅是第一个，公平地说，它看起来像是，但虚线矩形就像左边的两条虚线，仅此而已，只有第一个Dropzone呈现为一个90%宽度的完整矩形。

Answer 1

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

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