Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/html/82.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Jquery 如何在选择“是/否”的基础上自动更改调查页面上Q系列的编号_Jquery_Html_Css_Angularjs - Fatal编程技术网

Jquery 如何在选择“是/否”的基础上自动更改调查页面上Q系列的编号

Jquery 如何在选择“是/否”的基础上自动更改调查页面上Q系列的编号,jquery,html,css,angularjs,Jquery,Html,Css,Angularjs,我有一个调查,是使用DIV元素而不是传统的表格方法编写的 问题是:我必须自动编号页面上的问题编号。有一个问题要求回答“是”或“否”,如果用户回答“是”,则页面上会显示更多的问题,如果用户选择“否”,则不会显示这些问题。此外,还有一个问题是选择多个适用于用户的选项,根据这些复选框或选择,页面上显示的Q很少 需要根据页面上显示的问题按顺序自动编号 这与我想要实现的非常接近——但是使用div,没有表布局。因此,我没有删除选项,而是使用了是/否单选按钮和一些复选框来显示其他问题 <div clas

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

问题是:我必须自动编号页面上的问题编号。有一个问题要求回答“是”或“否”,如果用户回答“是”,则页面上会显示更多的问题,如果用户选择“否”,则不会显示这些问题。此外,还有一个问题是选择多个适用于用户的选项,根据这些复选框或选择,页面上显示的Q很少

需要根据页面上显示的问题按顺序自动编号

这与我想要实现的非常接近——但是使用div,没有表布局。因此,我没有删除选项,而是使用了是/否单选按钮和一些复选框来显示其他问题

<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>

您可以使用一个简单的jQuery选择器,然后对结果进行迭代,如下所示:

函数自动编号{ $。每个$。问题编号:可见',函数I,元素{ $elem.texti+1; } } 1.世卫组织: 1.什么: 1.什么时候: 1.哪里: 1.为什么?
自动编号使用顺序;函数在显示和隐藏两个事件后,在每个单选按钮和复选框事件触发后调用。工作得很有魅力

$(document).ready(function(){

        order();

        function order() {

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

使用与示例中相同的原则似乎更少的工作,不是吗

body {
    counter-reset: count;
}

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

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

欢迎来到堆栈溢出!寻求代码帮助的问题必须包括在问题本身中重现代码所需的最短代码,最好是以最短的代码。看,“子问题”不是像3a、3b等那样编号吗?这是一个合乎逻辑的过程。不,整个调查总共有24个问题,其中一些问题根据Q中带有复选框的选项显示在屏幕上。让我编译代码并将其添加到这里。这可以在页面显示后进行排序。在一个场景中,根据某些条件选择弹出的其他问题没有按顺序编号。此解决方案仅在第一次加载时有效,当页面上有逻辑时不适用。有什么建议吗?我正试图编译并举例说明,但有些东西不起作用:更改问题编号将是一个非常混乱的用户体验。。。但是你只需再次调用autonumber函数,它就会对所有内容重新排序。谢谢,非常感谢JDB。我确实做了一些调整,但效果很好!是的,这也行!但是,有时在IE8浏览器中它会给我带来问题。这是我想到的第一个解决方案!