这个问题太复杂了。 请帮忙。。
所以我有两个按钮,你们可以在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更新数据库,但似乎没有任何工作,所以有人能帮我一个提示或一点代码吗? 那就太好了!
我建议您在每次更改订单时将订单存储到本地存储
中,然后当页面重新加载时,您首先检查本地存储
中是否有任何预设的订单。
我也会建议你给每一张卡片赋予一些标识符属性,这样它就可以很容易地被访问,而不是需要通过内部文本来识别它们。
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);
});
getCardsOrder
和setCardsOrder
的实现对我来说相当模糊,因为我不熟悉您正在使用的插件,但我希望这能给您提供一个一般的指导。