Question

我有以模态和上传图像功能显示的图像。当我上传新图像时，它们会附加到最后一个现有图像，并且最后一个现有图像的背景应该变为红色。

出于某种原因，发生的事情是，当我一次上传2张图片时，最后一张现有记录会变为红色，但第一张附加图片也是如此。我不明白为什么第一个上传的图片也应用了CSS。

   $('#fileupload').fileupload({
        url: url,
        dataType: 'json',
        done: function (e, data) {
            $( ".img-box" ).last().css("background", "red");
            $.each(data.result.files, function (index, file) {
                $( "#gallery-body" ).append(`
                <div class="col-md-3 img-box">
                    <input type="checkbox" id="" name="pics[]" value="${file.name}" data-id="" />
                    <label for="" style="background-image: url(uploads/${file.name})">
                        <i class="glyphicon glyphicon-ok"></i>
                    </label>
                </div>

               `);
    // progress bar

HTML输出：

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

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

Answer 1

单.img-box是#gallery-body容器的最后一项。因此，第二次调用脚本会为第一个.img-box设置红色背景（请参阅下面的代码段）。

＆＃13;

$("button").click(function() {
  $(".img-box").last().css("background", "red");
  $("#gallery-body").append(
    "<div class=\"img-box\">" +
    "content" +
    "</div>");
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="gallery-body">
</div>
<button>Add new item</button>

＆＃13;

如果你想只有最后一项是红色的，你可以使用CSS：

＆＃13;

$("button").click(function() {
  $("#gallery-body").append(
    "<div class =\"img-box\">" +
    "content" +
    "</div>");
});

＆＃13;

.img-box:last-child {
  background-color: red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="gallery-body">
</div>
<button>Add new item</button>

＆＃13;

jQuery .last（）选择2个值而不是1个

1 个答案: