Question

我试图连续显示三张图片。例如，我试图让页面看起来像这样（我手动前进并输入我想要的所有html）：http://imgur.com/AsizGyy

但是，当我尝试使用jQuery附加图片以尝试使其显示为上一屏幕截图中的图像时，它显示如下：http://imgur.com/Vkt4ljH

显然，这与我想要的不同。

这是我的代码（html和jQuery）

<div class="w3-container" id="album-header" style="display: none;">
    <h4 class="w3-text-black"></h4>
</div>

<div class="w3-row-padding w3-margin-top" style="display: none;">
    <div class="w3-third">
        <div class="w3-card-2" id="palbums">
            <!-- image here -->
        </div>
    </div>
</div>

$('#album-name').on('change', function() {
    // retrieve the images from the photo album selected
    $.ajax({
        type: "POST",
        url: "/members/profile/get-photos-from-album",
        dataType: "json",
        data:  { 
            album_name: $('#album-name option:selected').val()
        }
    }).done(function(msg) {
        if (msg.photos == undefined) {
            $('#no-album-photos .w3-col m12').attr('style', 'display: initial;');
            $('#no-album-photos .w3-col m12 ').html("<p>No photos were found in the album</p>");

            return false;
        } else {
            $('#album-header').attr('style', 'display: initial;');

            $('#album-header h4').html("Photos in " + $('#album-name option:selected').text().split("_")[0] + ":");

            $('.w3-row-padding .w3-margin-top').attr('style', 'display: initial;');

            $.each(msg.photos, function(i, item) {
                $('div.w3-third').find('.w3-card-2').append('<img src="<?php echo $this->basePath() . '/images/profile/' . $this->identity() . '/albums/'; ?>' + $('#album-name option:selected').val() + '/' + msg.photos[i] + '" style="width: 100%;">');
            });
        }
    }).fail(function(msg) {
        alert(msg);
    });
});

我知道这个问题在$ .each函数中，但我对如何解决这个问题感到茫然（在搜索任何问题或教程之后如何解决这个问题但不幸的是没有运气）。

我想要的html就是这样：

<div class="w3-row padding w3-margin-top">
    <div class="w3-third">
        <div class="w3-card-2">
           <!-- image here -->
        </div>
    </div>

    <div class="w3-third">
        <div class="w3-card-2">
           <!-- image here -->
        </div>
    </div>

    <div class="w3-third">
       <div class="w3-card-2">
           <!-- image here -->
       </div>
    </div>
</div> 
<!-- after 3 in a row -->
<!-- make a new row -->
<div class="w3-row padding w3-margin-top">
    <div class="w3-third">
        <div class="w3-card-2">
           <!-- image here -->
        </div>
    </div>

    <div class="w3-third">
        <div class="w3-card-2">
           <!-- image here -->
        </div>
    </div>

    <div class="w3-third">
       <div class="w3-card-2">
           <!-- image here -->
       </div>
    </div>
</div>

任何帮助将不胜感激。如果需要更多信息，我可以尝试发布更多信息。

谢谢！

Answer 1

您正在堆叠DIV，这将创建列，以便您的代码正常运行，这是您的HTML错误。您可以使用float: left来执行此操作

<div class="w3-row padding w3-margin-top">
    <div class="w3-third" style="float: left">
        <div class="w3-card-2">
           Image1
        </div>
    </div>

    <div class="w3-third" style="float: left">
        <div class="w3-card-2">
           Image2
        </div>
    </div>

    <div class="w3-third" style="float: left">
       <div class="w3-card-2">
           Image3
       </div>
    </div>
</div>

FIDDLE

OR样式表

.w3-third {
    float: left;
    max-height: 200px;
}
img {
    max-height: 150px;
    padding-bottom: 10px;
}

Answer 2

尝试使用$ .each函数更新该行。看起来像你在 div.w3-third 中循环而不是 div.w3-row 。

$(this).append('<div class="w3-third"><div class="w3-card-2"><img src="<?php echo $this->basePath() . '/images/profile/' . $this->identity() . '/albums/'; ?>' + $('#album-name option:selected').val() + '/' + msg.photos[i] + '" style="width: 100%;"></div></div>');

虽然这不是使用jQuery构建html的最佳实现。

每次都不需要新行。如果你认为你的css类.w3-third是你行的三分之一。你会有类似的东西

<强> CSS

.w3-third {
     width: 33.3%;
     float: left;
 }

设置图像包装的高度

    .w3-card-2 {
       height: 240px;
       margin-bottom: 15px;
    }

OR

.w3-card-2, .w3-card-2 img {
       height: 240px;
}

希望这有帮助。

Answer 3

my_data %>% 
    group_by(Month) %>% 
    summarise_all(
        funs(if(all(is.na(.))) NA else sum(., na.rm = TRUE))
    )

# A tibble: 2 x 4
#       Month Value_1 Value_2 Value_3
#      <fctr>   <dbl>   <dbl>   <lgl>
#1 1995-01-01       3       7      NA
#2 1995-02-01      NA       1      NA

使用jQuery分别显示图像

3 个答案: