数字动态生成的茧字段

Question

我一直在使用Cocoon gem来动态生成rails中的嵌套字段.我遇到了一个应用程序,我想用数字标记cocoon生成的字段; 如下所示.

Field 1: __________
Field 2: __________
Field 3: __________

我想我可以通过编写自己的javascript来强制它,但有没有内置功能可以帮助我做到这一点？

非常感谢任何指导.

Answer 1

您不一定需要任何JavaScript.根据您的标记,您可以包装嵌套字段并使用CSS计数器来实现编号.如果你删除一些项目,它也会自动重新编号.考虑这个HTML:

<div class="fields">
  <div class="field">Nested fields</div>
  <div class="field">Nested fields</div>
</div>

与以下CSS一起,Field <idx>:每个都会有.field.

.fields {
  reset-counter: idx;
}

.field {
  counter-increment: idx;
}

.field:before {
  content: "Field " counter(idx) ":";
}

您不能将任何HTML直接放在content值中,但除此之外,您可以根据需要设置"元素"的样式(最明显的是它的位置).