随机化弹性盒顺序

Posted 2023-03-06

【中文标题】随机化弹性盒顺序

【英文标题】：Randomize flex box order

【发布时间】：2019-04-04 20:36:08

【问题描述】：

这可能看起来有点奇怪，但我需要随机化 4 个 flexbox 项目的顺序。这些需要在初始化时随机化。

我可以在 javascript 中随机化数字，但是如何将该属性绑定到 CSS？

这是我的代码：

CSS：

.buttons 
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
    margin: 2rem;

html：

  <div class="buttons">
    <button> mcqs.answer1 </button>
    <button> mcqs.answer2 </button>
    <button> mcqs.answer3 </button>
    <button> mcqs.answer4 </button>
  </div>

基本上，我只需要一种非常简单的方法来随机化答案的顺序（对于多项选择测试应用程序）。谢谢！

【问题讨论】：

我认为您可以像这样重复您的按钮：<button ng-repeat="(key,value) in mcqs">value</button>。然后可以考虑添加一些动态类，ng-class="get_random_class($index)"等。

【参考方案1】：

试试这个，你不需要随机化数字：

var answers  = $("button");
for(var i = 0; i < answers .length; i++)
    var target = Math.floor(Math.random() * answers .length -1) + 1;
    var target2 = Math.floor(Math.random() * answers .length -1) +1;
    answers .eq(target).before(answers .eq(target2));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="buttons">
    <button> mcqs.answer1 </button>
    <button> mcqs.answer2 </button>
    <button> mcqs.answer3 </button>
    <button> mcqs.answer4 </button>
  </div>

这里的原始答案： Random Div Order on Page Load

【讨论】：

确认！ jQuery 和 AngularJS 项目？我再说一遍...... ack！

【参考方案2】：

您需要使用 AngularJS 控制器中的函数有条件地将类应用于您的元素。为这些类添加 CSS 规则。

<style>
.col-order-1 
    order: 1;

.col-order-2 
    order: 2;

</style>

<div class="buttons" ng-class="getOrderClass($index)"> ... </div>

不要尝试直接修改 CSS。您还可以在控制器中构建整个按钮列表标记并绑定它。

【讨论】：

$index 参数需要我在 ng-repeat 中循环按钮，对吗？我将永远只有 4 个按钮，因此是否可以根据（比如说）1、2、3 或 4 的参数随机化它从函数中收集的类？这至少只是我最初的想法，我不需要循环按钮。

是的。我没有表示重复，但这可能是最简单的方法。简化你的标记很好，而且你已经有了数组（或者可以轻松地创建一个）。

添加一个类不会改变 flexbox 显示内容的顺序。除非您指定 flex-order

，否则它将始终按标记顺序显示内容

@BryceHowitson，order can be applied via CSS classes，不是吗？

@isherwood 您引用的链接不允许随机顺序，它基于标记顺序，只能定义演示文稿是从第一个项目还是最后一个项目开始。

【参考方案3】：

将flex-order 添加到buttons 以强制它们以独立于标记的任何顺序显示。

这是基本用例：

.flex-item 
   order: 1;

或者你可以像这样添加 CSS 内联：

<div class="buttons">
    <button ng-style="'order': randomIndexNum"> mcqs.answer1 </button>
    <button ng-style="'order': randomIndexNum"> mcqs.answer2 </button>
    <button ng-style="'order': randomIndexNum"> mcqs.answer3 </button>
    <button ng-style="'order': randomIndexNum"> mcqs.answer4 </button>
</div>

这可以通过 Angular 或任何其他可以修改 HTML onInit 的工具来完成。

来自CSS-Tricks的文档

【讨论】：

这如何让人们随机化订单？

您可以在该项目中放入任何整数，以强制它在基于 flex-box 的布局中显示的顺序，而不是它在标记中出现的顺序。