如何根据选择是/否 ans 在调查页面上自动更改 Q 序列的编号

Question

我有一个使用 DIV 元素而不是传统的 TABLE 方法编写的调查。

问题是：我必须为页面上的问题编号自动编号。有一个问题要求回答“是”或“否”，如果用户回答“是”，则页面上会显示更多问题，如果用户选择“否”，则不会出现。此外，还有一个问题是选择多个适用于用户的选项，并且基于这些复选框（或选择），页面上会显示更多的 Q。

需要根据页面显示的问题依次自动编号。

这与我想要实现的目标很接近 - http://jsfiddle.net/3RZWt/8/ 但使用 DIV，没有 TABLE 布局。因此，我没有删除选项，而是使用是/否单选按钮和一些显示其他问题的复选框。

<div class="form-control">
<label><span class="question-number">1</span>. Who:</label>
</div>

<div class="form-control" style="display:none;">
<label><span class="question-number">2</span>. What:</label>
</div>

<div class="form-control">
<label><span class="question-number">3</span>. When:</label>
</div>

<div class="form-control">
<label><span class="question-number">4</span>. Where:</label>
</div>

<div class="form-control">
<label><span class="question-number">5</span>. Why:</label>
</div>

Answer 1

您可以使用一个简单的 jQuery 选择器，然后遍历结果，如下所示：

function autonumber(){
  $.each($('.question-number:visible'), function(i, elem){
    $(elem).text(i + 1);
  })
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-control">
<label><span class="question-number">1</span>. Who:</label>
</div>

<div class="form-control" style="display:none;">
<label><span class="question-number">1</span>. What:</label>
</div>

<div class="form-control">
<label><span class="question-number">1</span>. When:</label>
</div>

<div class="form-control">
<label><span class="question-number">1</span>. Where:</label>
</div>

<div class="form-control">
<label><span class="question-number">1</span>. Why:</label>
</div>

<button onclick="autonumber()">Auto Number</button>

Answer 2

使用了 order();在每个单选按钮和复选框事件触发之后调用的函数（在显示和隐藏之后，这两个事件）。像魅力一样工作！

$(document).ready(function(){

        order();

        function order() {

            (function renumberQuestions() {
                $('.question-number:visible').each(function (index) {
                    $(this).text(index + 1);
                });
            })();
        }

Answer 3

使用与示例中相同的原理似乎更少工作，不是吗？ ：

body {
    counter-reset: count;
}

.question-number {
    counter-increment: count;
}

.question-number:after {
    content: counter(count);
}