追加到同一个div

时间:2017-12-19 12:37:54

标签: javascript jquery html laravel-5

此刻我遇到了Jquery / Dropzone这个问题。在我添加了带有dropzone的图像后,它上传了图片并添加了一个div,在这个div中我附加了一个隐藏的输入字段。问题是,当我上传另一个图像时,它将隐藏的输入字段从第二个图像添加到两个div。我希望我很清楚!

这是我的Jquery代码,将在上传图片后执行:

// on success add a hidden field with the img path
myDropzone.on("success", function(file, response) {
  console.log(response);
  $('<input>').attr({
    type: 'hidden',
    name: 'img_path',
    id: 'uploadedImg',
    value: response
  }).appendTo('.action-buttons').next();
});

这是应该追加的html:

    <!-- dropbox -->
<div class="box box-primary">
    <div class="box-body upload-form">
        <h5>Voeg afbeeldingen toe aan uw filiaal.</h5>
        <!-- The fileinput-button span is used to style the file input field as button -->
        <span class="btn btn-success fileinput-button">
            <i class="glyphicon glyphicon-plus"></i>
            <span>Voeg afbeeldingen toe...</span>
        </span>

        <button type="reset" class="btn btn-warning cancel">
            <i class="glyphicon glyphicon-ban-circle"></i>
            <span>Anuleer upload</span>
        </button>

        <!-- The global file processing state -->
        <span class="fileupload-process">
            <div id="total-progress" class="progress progress-striped active" role="progressbar" aria-valuemin="0"
                 aria-valuemax="100" aria-valuenow="0">
              <div class="progress-bar progress-bar-success" style="width:0%;" data-dz-uploadprogress></div>
            </div>
        </span>


        <div class="table table-striped files" id="previews">
            <div id="template" class="file-row">
                <!-- This is used as the file preview template -->
                <div>
                    <span class="preview"><img data-dz-thumbnail/></span>
                </div>
                <div>
                    <p class="name" data-dz-name></p>
                    <strong class="error text-danger" data-dz-errormessage></strong>
                </div>
                <div>
                    <p class="size" data-dz-size></p>
                    <div class="progress progress-striped active" role="progressbar" aria-valuemin="0"
                         aria-valuemax="100" aria-valuenow="0">
                        <div class="progress-bar progress-bar-success" style="width:0%;"
                             data-dz-uploadprogress></div>
                    </div>
                </div>
                <div class="action-buttons">
                    <button class="btn btn-primary start">
                        <i class="glyphicon glyphicon-upload"></i>
                        <span>Start</span>
                    </button>
                    <button data-dz-remove class="btn btn-warning cancel">
                        <i class="glyphicon glyphicon-ban-circle"></i>
                        <span>Cancel</span>
                    </button>
                    <button data-dz-remove class="btn btn-danger delete dz-remove">
                        <i class="glyphicon glyphicon-trash"></i>
                        <span>Delete</span>
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

我不知道如何将正确的输入字段附加到正确的div,我希望有人可以帮助我!

2 个答案:

答案 0 :(得分:1)

'.action-buttons'将选择class="action-buttons"的所有元素。如果有两个,则两个都将被选中。三,四五相同,但有很多。 .append()会将重复的内容附加到所有中。

您只需要选择一个感兴趣的元素,我正在考虑的是:last

尝试

}).appendTo($('.action-buttons').filter(":last"));

答案 1 :(得分:0)

根据我的理解并说你想要只做第一个div,就像这样

myDropzone.on("success", function(file, response) {
  console.log(response);
  $('.action-buttons : first').append('<input type="hidden" name="img_path" id="uploadedImg" value="'+ response +'"></input>');
});

正如我在评论中所说,你必须为此目的选择一个特定的div,所以转而使用id