在循环浏览数据库中的项目时如何显示视觉反馈

Question

我正在制作一个项目拣选系统，用户将在其中单击一个按钮，它将从数据库中检索要拣选的物品。选择后，用户将单击该按钮，它将转到表中的下一项。我想在用户每次点击时显示一种视觉显示或反馈。

假设有 10

个项目需要选择，我会有一个每次递增直到完成的进度条，或者甚至像文本指示器一样，例如 1//10、2/10 等。

作为参考，我将包括我的相关代码

这是 js

<script >
var offset = 0;
$(document).ready(function() {
$('#button1').click(function(e) {
    $("#div1").empty();
    // pass offset value with GET request
    $.getJSON("getItem.php?offset=" + offset, function(result) {
    offset++; // increment the value after sucessful AJAX call
    $.each(result, function(i, field) {
        $("#div1").empty();
        $("#div1").append(JSON.stringify(result)); //alert(JSON.stringify(data));
    });
});
});
}); 
</script>

和我的PHP

mysqli_select_db($con,"orders");
$rows = null;
// Get the offset value
$offset = empty($_GET['offset']) ? 0 : $_GET['offset'];
$sql="SELECT * FROM orders Limit $offset, 1 "; // pass the offset value to LIMIT query
$result = mysqli_query($con,$sql);
while($row = mysqli_fetch_assoc($result))
$rows[] = array_map('utf8_encode', $row);
echo json_encode($rows);

我已经做了一些谷歌搜索，但找不到任何与我的想法相关的例子，如果有人知道如何或可以指出与我类似的问题的解决方案，将不胜感激

Answer 1

我不是 100% 确定你想要的是什么，但如果你想要一个简单的加载动画，你可能可以使用 CSS、JS 和 HTML 的组合来做到这一点。创建div，并为其提供类名或ID。用于加载的 CSS 将如下所示：

.loading{
  z-index: 10;
  width: 100%;
  height: 100vh;
  background-color: rgb(255,255,255); /*What ever color you want*/
  position: absolute;
  top: 0;
  left: 0;
}

我不确定在加载下一个结果时要显示什么，因此为了获得灵感，请查看用于加载动画的 codePen。例如 https://codepen.io/Manoz/pen/pydxK

在 CSS 中，创建一个名为 displayNone 的类。css 看起来像

.displayNone{
  display:none;
}

然后使用 JS 将 displayNone 添加到/删除加载类，具体取决于您是否有结果。您甚至可以只创建一个@keyframes动画。很多方法。https://spangle.com.au