Question

我正在尝试获取最后一个图像的id值，这是复选框中的值。 id值如下所示：＆＃34; image_1，image_2等

我只需要实际的数字，所以我使用了切片功能。例如，如果我上传3张图片，那么我需要获取最后一个ID，并为每个添加的新图片增加1。因此，如果最后一个图像是image_5并且我上传了3个新图像，则新图像应该是image_6，image_7和image_8。但我遇到的问题是所有3张图片最终都是image_6。

原始代码：

//get the id value i.e.: image_1
$.each(data.result.files, function (index, file) {
var lastBox = $( 'input[name="pics[]"]' ).last().data("id");

// remove the image_ prefix to get the actual number value
var lastId = parseInt(lastBox.slice(6));

// increment each id by 1 in the $.each() loop
var total = lastId++;
console.log(total);

编辑：包含答案的完整代码：

 $('#fileupload').fileupload({
    url: url,
    dataType: 'json',
    done: function (e, data) {
        var lastBox = $( 'input[name="pics[]"]' ).last().data("id");
        var lastId = parseInt(lastBox.slice(6));
        var total = lastId;
        $.each(data.result.files, function (index, file) {
            total++;
            console.log(total);
            $( "#gallery-body" ).prepend(`

                <div class="col-md-3 img-box">
                    <input type="checkbox" id="image_${total}" name="pics[]" value="${file.name}" data-id="image_${total}" />
                    <label for="image_${total}" style="background-image: url(uploads/${file.name})">
                        <i class="glyphicon glyphicon-ok"></i>
                    </label>
                </div>
                    `);

HTML OUTPUT：

<div class="col-md-3 img-box">
    <input type="checkbox" id="image_17" name="pics[]" value="IMG_5271.jpg" data-id="image_17">
    <label for="image_17" style="background-image: url(uploads/IMG_5271.jpg)">
        <i class="glyphicon glyphicon-ok"></i>
    </label>
</div>
<div class="col-md-3 img-box">
    <input type="checkbox" id="image_17" name="pics[]" value="dzone.jpg" data-id="image_17">
    <label for="image_17" style="background-image: url(uploads/dzone.jpg)">
        <i class="glyphicon glyphicon-ok"></i>
    </label>
</div>

Answer 1

你应该在循环之前得到最后一个ID ，然后在循环内增加。

由于您要在列表的前面添加新项目，因此您应该使用.first()来获取编号最高的ID。

var data = { result: { files: [{ name: "IMG_5271.jpg" }, { name: "dzone.jpg" }] } }; var lastBox = $('input[name="pics[]"]').first().data("id"); var lastId = parseInt(lastBox.slice(6)); var total = lastId; $.each(data.result.files, function(index, file) { total++; console.log(total); $("#gallery-body").prepend(` <div class="col-md-3 img-box"> <input type="checkbox" id="image_${total}" name="pics[]" value="${file.name}" data-id="image_${total}" /> <label for="image_${total}" style="background-image: url(uploads/${file.name})"> <i class="glyphicon glyphicon-ok"></i> </label> </div> `); });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="gallery-body"> <input type="checkbox" name="pics[]" data-id="image_4"> <input type="checkbox" name="pics[]" data-id="image_3"> <input type="checkbox" name="pics[]" data-id="image_2"> <input type="checkbox" name="pics[]" data-id="image_1"> </div>

当我运行它时，结果是：

<div id="gallery-body"> <div class="col-md-3 img-box"> <input type="checkbox" id="image_6" name="pics[]" value="dzone.jpg" data-id="image_6"> <label for="image_6" style="background-image: url(uploads/dzone.jpg)"> <i class="glyphicon glyphicon-ok"></i> </label> </div> <div class="col-md-3 img-box"> <input type="checkbox" id="image_5" name="pics[]" value="IMG_5271.jpg" data-id="image_5"> <label for="image_5" style="background-image: url(uploads/IMG_5271.jpg)"> <i class="glyphicon glyphicon-ok"></i> </label> </div> <input type="checkbox" name="pics[]" data-id="image_4"> <input type="checkbox" name="pics[]" data-id="image_3"> <input type="checkbox" name="pics[]" data-id="image_2"> <input type="checkbox" name="pics[]" data-id="image_1"> </div>

使用++和jquery $ .each（）

1 个答案: