angularjs 随机化弹性框顺序

ego6inou 于 6个月前发布在 Angular

关注(0)|答案(4)|浏览(77)

这可能看起来有点奇怪，但我需要随机化4个flexbox项目的顺序。这些需要在Init上随机化。
我可以在JavaScript中随机化数字，但如何将该属性绑定到CSS？
这是我的代码：
CSS：

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

字符串
超文本标记语言：

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

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

angularjs

来源：https://stackoverflow.com/questions/53087404/randomize-flex-box-order

4条答案

按热度按时间

qojgxg4l1#

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

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));
}

个字符
原始答案：Random Div Order on Page Load

赞(0）回复(0）举报 6个月前

f87krz0w2#

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

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

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

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

赞(0）回复(0）举报 6个月前

gpnt7bae3#

将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

赞(0）回复(0）举报 6个月前

qhhrdooz4#

我会得到按钮容器，将其转换为数组， Shuffle 的图像和填充它再次与结果

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    buttons {
      display: flex;
      flex-wrap: nowrap;
      /* Initially hide the container */
      visibility: hidden;
    }

    button {
      /* Add your button styles here */
      width: 100px;
      height: 100px;
      /* Add any other styles as needed */
    }
  </style>
  <title>Randomize Buttons</title>
</head>
<body>

<div class="buttons">
  <button>Button 1</button>
  <button>Button 2</button>
  <!-- Add more buttons as needed -->
</div>

<script>
  window.onload = function() {
    // Get the container and the buttons
    var container = document.querySelector(".buttons");
    var buttons = container.querySelectorAll("button");

    // Convert NodeList to an array for easy manipulation
    var buttonsArray = Array.from(buttons);

    // Shuffle the array (randomize the order)
    buttonsArray.sort(function() {
      return 0.5 - Math.random();
    });

    // Clear the container and append the shuffled buttons
    container.innerHTML = "";
    buttonsArray.forEach(function(button) {
      container.appendChild(button);
    });

    // Show the container after rearranging the buttons
    container.style.visibility = "visible";
  };
</script>

</body>
</html>

字符串

赞(0）回复(0）举报 6个月前

我来回答

angularjs 随机化弹性框顺序

4条答案

相关问题

热门标签

最新问答