Question

这似乎有些奇怪，但是我需要随机分配4个flexbox项目的顺序。这些需要在Init上随机分配。

我可以在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>

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

Answer 1

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

<style>
.col-order-1 {
    order: 1;
}
.col-order-2 {
    order: 2;
}
</style>

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

请勿尝试直接修改CSS。您还可以在控制器中构建整个按钮列表标记，并将其绑定。

Answer 2

尝试一下，您不需要将数字随机化：

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

Answer 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的文档

随机分配弹性框顺序

3 个答案: