提问者:小点点

我怎样才能把上次订货的纽扣放进去


这个问题太复杂了。 请帮忙。。

所以我有两个按钮,你们可以在1中看到。 图片。 我希望按钮重新加载后的页面,是在相同的顺序,我排序它。

导入得脚本:


<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/web-animations/2.3.1/web-animations.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/muuri/0.5.3/muuri.min.js"></script>

按HTML代码排序

<div class="grid">
  <div class="item">
    <a>
        <div class="card-primary" style="width-min: 18rem;">
            <div class="card-body">
                <h5 class="card-title">Test</h5>
                <p class="card-text">asdasd</p>
            </div>
        </div>
     </a>
  </div>

  <div class="item">
    <a>
        <div class="card-info" style="width-min: 18rem;">
            <div class="card-body">
                <h5 class="card-title">asd</h5>
                <p class="card-text">asd</p>
            </div>
        </div>
     </a>
  </div>
</div>

按我排序

(带Muuri)

const grid = new Muuri(".grid", {
    dragEnabled: false
});

问题:

我希望当页面重新加载时,按钮的顺序从我上次排序的正确顺序。

(否则HTML代码将按标准顺序显示按钮。。。这就是问题所在)

我尝试了很多东西,比如列表和用sql更新数据库,但似乎没有任何工作,所以有人能帮我一个提示或一点代码吗? 那就太好了!


共1个答案

匿名用户

我建议您在每次更改订单时将订单存储到本地存储中,然后当页面重新加载时,您首先检查本地存储中是否有任何预设的订单。

我也会建议你给每一张卡片赋予一些标识符属性,这样它就可以很容易地被访问,而不是需要通过内部文本来识别它们。

document.querySelector('the-sort-button').addEventListener('toggle-or-smth', () => {
  let order = getCardsOrder();
  localStorage.setItem("cardOrder", order);
});

现在,在脚本的开头,您需要检查以前的顺序。

window.addEventListener('load', () => {
  let order = localStorage.getItem("cardOrder");
  if (order !== null) setCardsOrder(order);
});

getCardsOrdersetCardsOrder的实现对我来说相当模糊,因为我不熟悉您正在使用的插件,但我希望这能给您提供一个一般的指导。