如何绘制 HTML 班级卡片答案

【问题标题】：How to draw HTML class cards如何绘制 HTML 班级卡片
【发布时间】：2020-05-30 06:50:48
【问题描述】：

我需要使用 HTML 类卡片在我的页面上显示某些数据。

这是我正在使用的样式。

<style>
.column {
  float: left;
  width: 25%;
  padding: 0 10px;
}

.row {margin: 0 -5px;}

.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  padding: 16px;
  text-align: center;
  background-color: #f1f1f1;
}
</style>

这是我用来绘制卡片的 HTML 代码。

<div class="col-md-8">
            <div class="row">
                <div class="column">
                    <div id="roomList" class="card">
                    </div>
                </div>
            </div>
        </div>

我正在使用 ajax 从 SQL 加载数据。将数据加载到 ajax 后，将数据附加到 roomList 以创建卡片。

 $.ajax({
        url: '/HouseKeeping/OutOfOrderTXN/RoomList',
        dataType: 'json',
        method: 'GET',
        success: function (data) {
            debugger;
            $.each(data, function (index, eachRoomList) {
                $('#roomList').append( 
                    '<div class="row"><div class="column"><div class="card"> data-room-id="' + eachRoomList.Id + '" data-room-name="' + eachRoomList.RoomName + '"</div></div></div>>');
            })
        },
        error: function (error) {

        }
    });

+ eachRoomList.RoomName + 加载到这里的数据是 eg=100,101,102

但它不起作用。下面是一张我的班级卡片是如何绘制的图片。

数据未显示在“卡片”类中，例如 100 应显示在“卡片”类中我的代码有什么问题。我是初学者，请帮助我

enter image description here

【问题讨论】：

能否提供您回复的样本数据？ 100,101,102是什么形式的？数组，对象？
@kokila 它以 json 格式出现，但我只采用了重要的东西，我的意思是我应该在 class=card 中显示的数据
你的ajax请求成功了吗？您是否从后端获取数据并且只是在显示时遇到问题？
@kokila 是的，它成功了。数据也由 ajax 从 SQL 中检索。在我的 ajax 代码问题中，(+ eachRoomList.RoomName +) 部分从 SQL 中获取例如 100 的值。该值应显示在我的 class=card 中。错误在于显示值 100
data 里面有什么？你可以在你的问题中添加它吗？

标签： html jquery css sql ajax

【解决方案1】：

如果您的 ajax 请求成功，则附加子项存在问题。您的 class="card" div 未关闭。可以试试吗

$('#roomList').append(`<div class="row"><div class="column">   <div class="card" data-room-id="${eachRoomList.Id}" data-room-name="${eachRoomLi[![enter image description here][1]][1]st.RoomName}">${eachRoomList.RoomName}</div></div></div>`);

【讨论】：

就像我的代码一样，即使在您的代码中也一切正常，唯一的事情是 [RoomName] 值未显示在 class=card 上，即使我已附加它。因此，例如，如果 RoomName 包含 100，它不会在附加类中显示为 100。它在我的问题中显示如上图
我正在使用这个示例数据，它工作得很好 let s = [{ Id: "1", RoomName: "100" }, { Id: "2", RoomName: "101" } ];
卡片是否也显示了价值？，在我的情况下，只有一个没有任何价值的小盒子（就像我的问题-Image）。我认为错误是我的风格或在我的附录中。
你检查了我在我的问题中附上的图片吗/
我看到了你附上的图片。我得到了卡以及价值