带状态栏的表格

Posted 2023-04-18

【中文标题】带状态栏的表格

【英文标题】：Form with status bar

【发布时间】：2015-01-12 02:08:32

【问题描述】：

在我的网站上，我需要进行某种测试。它有 5 个问题，最后有一个状态栏。每个问题都有 2 个可能的答案（1 个否定和 1 个肯定）。

状态栏指示器从中间开始，根据答案，指示器向左或向右移动。

例子：

    < .  .  .  .  .  |  .  .  .  .  .  >
negative                            positive

我想我可以通过 javascript 中的某种计步器来实现这一点， 但我真的不知道怎么做。

请有人帮助我！

以下是我的问题代码。

<div class ="test">
<form>

<div class="testTitel">Titel1</div>
<div id="demo" class="collapse in">

<input type="radio" name="group1" value="G a"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Restinguet citius, si ardentem acceperit. <br>
<input type="radio" name="group1" value="G b"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Restinguet citius, si ardentem acceperit. <br>

<button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#demo,#demo2">
  NEXT
</button>
</div>
<div class="testTitel">Titel2</div>
<div id="demo2" class="collapse">

<input type="radio" name="group2" value="F a"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Restinguet citius, si ardentem acceperit. <br>
<input type="radio" name="group2" value="F b"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Restinguet citius, si ardentem acceperit. <br>

<button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#demo,#demo2">
  BACK
</button>
<button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#demo2,#demo3">
  NEXT
</button>
</div>
<div class="testTitel">Titel3</div>
<div id="demo3" class="collapse">

<input type="radio" name="group3" value="O a"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Restinguet citius, si ardentem acceperit. <br>
<input type="radio" name="group3" value="O b"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Restinguet citius, si ardentem acceperit. <br>

<button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#demo2,#demo3">
  BACK
</button>
<button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#demo3,#demo4">
  NEXT
</button>
</div>
<div class="testTitel">Titel4</div>
<div id="demo4" class="collapse">

<input type="radio" name="group4" value="W a"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Restinguet citius, si ardentem acceperit. <br>
<input type="radio" name="group4" value="W b"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Restinguet citius, si ardentem acceperit. <br>

<button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#demo3,#demo4">
  BACK
</button>
<button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#demo4,#demo5">
  NEXT
</button>
</div>
<div class="testTitel">Titel5</div>
<div id="demo5" class="collapse">

<input type="radio" name="group5" value="I a"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Restinguet citius, si ardentem acceperit. <br>
<input type="radio" name="group5" value="I b"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Restinguet citius, si ardentem acceperit. <br>

<button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#demo4,#demo5">
  BACK
</button>
</div>
</form>
</div>

【参考方案1】：

这是我根据您的问题制定的解决方案。

我创建了一个 html 仪表元素，该元素由一个嵌套在另一个 DIV 中的 DIV 组成。

<div id="qust_indicator">
  <div id="dial"></div>
</div>

然后我为仪表创建了一些简单的样式。我们要关注的 CSS 样式是#dial margin-left。我会习惯左右移动表盘。

#qust_indicator 
    background:blue;
    height: 5px;
    margin: 10px 0;
    width: 340px;


#dial 
    background:red;
    height: 10px;
    width: 20px;
    margin-left: 160px;

使用 jQuery，这是执行所有神奇操作的代码。

// create a variable for the form inputs
var $textRadioBtn = $('.test input[type="radio"]');

// radio button click event
$textRadioBtn.click(function () 

    // get the margin-left CSS value of the meeter dail
    var getDialmrLft = $('#dial').css('margin-left');

    // strip out the px from the margin-left CSS value 
    var strDialmrLft = getDialmrLft.replace('px', '');

    // convert the  margin-left CSS value to a number
    var NumDialmrLft = Number(strDialmrLft);

    // get the value of the checkbox ( 1 or 2 )
    var inptVal = this.value;

    // check to see if the checkbox value is 1 and less than the meter max value
    if ( inptVal == 1 && NumDialmrLft < 320 ) 

        // disable the selected checkbox
        $(this).prop('disabled', true);
        // enable the selected checkbox’s siblings
        $(this).siblings('input').prop('disabled', false);

        //set the incrementing value
        var newPos = NumDialmrLft + 20;
        // set the new margin-left CSS value and move the meter dail
        $('#dial').attr('style', 'margin-left:'+newPos+'px');
    // check to see if the checkbox value is 2 and greater than 0 value
     else if ( inptVal == 2 && NumDialmrLft > 0 ) 

        // disable the selected checkbox
        $(this).prop('disabled', true);
        // enable the selected checkbox’s siblings
        $(this).siblings('input').prop('disabled', false);

        //set the de-incrementing value
        var newPos = NumDialmrLft - 20;
        // set the new margin-left CSS value and move the meter dail
        $('#dial').attr('style', 'margin-left:'+newPos+'px');
    
);    

【讨论】：

如何使用 % 而不是 px？我希望它能够响应，已经尝试将所有 px 更改为 %，没有工作

【参考方案2】：

据我了解，您需要一个状态指示栏。这将意味着根据问题答案向左或向右移动栏。这意味着如果您回答更积极的答案，那么表盘会朝那个方向走得更远。我在这个过程中放置​​了一个否定的答案，然后拨号盘会在否定的一侧多一个位置，但仍然在肯定的区域，直到否定的答案多于肯定的答案。

您可以通过将指示器的总面积减去刻度盘的宽度来扩大刻度数以匹配您的问题数。在我的示例中，#qust_indicator 的宽度为 340 像素，表盘为 20 像素。因此，条件 if 语句正在为表盘寻找 320px 的最大正边距左属性。