javascript - 选中单选按钮时如何向下滑动div

Question

我有一个显示问题的列表，每个问题都有三个可能的答案。

它们是:ok、fout 和 nvt 只有 fout 我想要一个 div 滑入我可以添加一些东西。

基本上答案是:好、错和不适用。当答案错误时，我希望能够在输入字段中添加错误原因。

因此在该答案下方，我需要一个 div 仅在单击 fout 时向下滑动，并在单击其他两个选项之一时再次向上滑动。

我该怎么做？

这是我当前的 HTML:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row" id="questionrow">
  <div class="col-md-8">
    <input name="questionvalue" class="questionclass" type="text" value="Is de werkplek zodanig afgezet dat veilig gewerkt kan worden en dat er geen gevaar is voor omstanders/passanten?">
  </div>
  <div class="col-md-4">

    <div class="container text-right">
      <input type="radio" name="questionlist[Algemeen][Is de werkplek zodanig afgezet dat veilig gewerkt kan worden en dat er geen gevaar is voor omstanders/passanten?]" id="radio-1" value="ok" required="">
      <label class="radiotoggle" for="radio-1"><span class="radio">Ok</span></label>
      <input type="radio" name="questionlist[Algemeen][Is de werkplek zodanig afgezet dat veilig gewerkt kan worden en dat er geen gevaar is voor omstanders/passanten?]" id="radio-2" value="fout">
      <label class="radiotoggle" for="radio-2"><span class="radio">Fout</span></label>
      <input type="radio" name="questionlist[Algemeen][Is de werkplek zodanig afgezet dat veilig gewerkt kan worden en dat er geen gevaar is voor omstanders/passanten?]" id="radio-3" value="nvt" checked="">
      <label class="radiotoggle" for="radio-3"><span class="radio">N.v.t</span></label>
    </div>
  </div>
  <div class="col-md-8">
    <input name="questionvalue" class="questionclass" type="text" value="Zijn de medewerkers op de hoogte van de specifieke VGM-regels voor het uitvoeren van de werkzaamheden (TRA)?">
  </div>
  <div class="col-md-4">

    <div class="container text-right">
      <input type="radio" name="questionlist[Algemeen][Zijn de medewerkers op de hoogte van de specifieke VGM-regels voor het uitvoeren van de werkzaamheden (TRA)?]" id="radio-4" value="ok" required="">
      <label class="radiotoggle" for="radio-4"><span class="radio">Ok</span></label>
      <input type="radio" name="questionlist[Algemeen][Zijn de medewerkers op de hoogte van de specifieke VGM-regels voor het uitvoeren van de werkzaamheden (TRA)?]" id="radio-5" value="fout">
      <label class="radiotoggle" for="radio-5"><span class="radio">Fout</span></label>
      <input type="radio" name="questionlist[Algemeen][Zijn de medewerkers op de hoogte van de specifieke VGM-regels voor het uitvoeren van de werkzaamheden (TRA)?]" id="radio-6" value="nvt" checked="">
      <label class="radiotoggle" for="radio-6"><span class="radio">N.v.t</span></label>
    </div>
  </div>
  <div class="col-md-8">
    <input name="questionvalue" class="questionclass" type="text" value="Weten medewerkers wat zij moeten doen in geval van nood?">
  </div>
  <div class="col-md-4">

    <div class="container text-right">
      <input type="radio" name="questionlist[Algemeen][Weten medewerkers wat zij moeten doen in geval van nood?]" id="radio-7" value="ok" required="">
      <label class="radiotoggle" for="radio-7"><span class="radio">Ok</span></label>
      <input type="radio" name="questionlist[Algemeen][Weten medewerkers wat zij moeten doen in geval van nood?]" id="radio-8" value="fout">
      <label class="radiotoggle" for="radio-8"><span class="radio">Fout</span></label>
      <input type="radio" name="questionlist[Algemeen][Weten medewerkers wat zij moeten doen in geval van nood?]" id="radio-9" value="nvt" checked="">
      <label class="radiotoggle" for="radio-9"><span class="radio">N.v.t</span></label>
    </div>
  </div>
  <div class="col-md-8">
    <input name="questionvalue" class="questionclass" type="text" value="Zijn de voorgeschreven veiligheidsmaatregelen toegepast en worden deze nageleefd (LMRA)?">
  </div>
  <div class="col-md-4">

    <div class="container text-right">
      <input type="radio" name="questionlist[Algemeen][Zijn de voorgeschreven veiligheidsmaatregelen toegepast en worden deze nageleefd (LMRA)?]" id="radio-10" value="ok" required="">
      <label class="radiotoggle" for="radio-10"><span class="radio">Ok</span></label>
      <input type="radio" name="questionlist[Algemeen][Zijn de voorgeschreven veiligheidsmaatregelen toegepast en worden deze nageleefd (LMRA)?]" id="radio-11" value="fout">
      <label class="radiotoggle" for="radio-11"><span class="radio">Fout</span></label>
      <input type="radio" name="questionlist[Algemeen][Zijn de voorgeschreven veiligheidsmaatregelen toegepast en worden deze nageleefd (LMRA)?]" id="radio-12" value="nvt" checked="">
      <label class="radiotoggle" for="radio-12"><span class="radio">N.v.t</span></label>
    </div>
  </div>
  <div class="col-md-8">
    <input name="questionvalue" class="questionclass" type="text" value="Zijn de medewerkers op de hoogte van de algemene VGM-regels (VGM-instructie)?">
  </div>
  <div class="col-md-4">

    <div class="container text-right">
      <input type="radio" name="questionlist[Algemeen][Zijn de medewerkers op de hoogte van de algemene VGM-regels (VGM-instructie)?]" id="radio-13" value="ok" required="">
      <label class="radiotoggle" for="radio-13"><span class="radio">Ok</span></label>
      <input type="radio" name="questionlist[Algemeen][Zijn de medewerkers op de hoogte van de algemene VGM-regels (VGM-instructie)?]" id="radio-14" value="fout">
      <label class="radiotoggle" for="radio-14"><span class="radio">Fout</span></label>
      <input type="radio" name="questionlist[Algemeen][Zijn de medewerkers op de hoogte van de algemene VGM-regels (VGM-instructie)?]" id="radio-15" value="nvt" checked="">
      <label class="radiotoggle" for="radio-15"><span class="radio">N.v.t</span></label>
    </div>
  </div>
</div>

因此，例如当第一个问题用 fout 回答时，我如何向下滑动下面的 div(例如类 col-md-12):

<div class="col-md-4">
  <div class="container text-right">
      <input type="radio" name="questionlist[Algemeen][Is de werkplek zodanig afgezet dat veilig gewerkt kan worden en dat er geen gevaar is voor omstanders/passanten?]" id="radio-1" value="ok" required="">
      <label class="radiotoggle" for="radio-1"><span class="radio">Ok</span></label>
      <input type="radio" name="questionlist[Algemeen][Is de werkplek zodanig afgezet dat veilig gewerkt kan worden en dat er geen gevaar is voor omstanders/passanten?]" id="radio-2" value="fout">
      <label class="radiotoggle" for="radio-2"><span class="radio">Fout</span></label>
      <input type="radio" name="questionlist[Algemeen][Is de werkplek zodanig afgezet dat veilig gewerkt kan worden en dat er geen gevaar is voor omstanders/passanten?]" id="radio-3" value="nvt" checked="">
      <label class="radiotoggle" for="radio-3"><span class="radio">N.v.t</span></label>
    </div>
</div>

我已经尝试添加一个 .slideDown() jquery 函数，但是为了使它起作用，应该向下滑动的 div 的 HTML 在回答问题之前应该已经存在，我需要将 HTML 添加到选择 fout 时的 DOM。

Answer 1

这是一个如何做到这一点的例子。基本上，

(1) 使用 HTML 数据属性为每个 input radio 响应存储一些文本(如果您愿意，可以使用其他方法，但这是可行的)。单击该按钮时，我们会抓取此处存储的任何文本并将其保存到一个变量中。

(2) 然后我们删除所有可能已经添加的 col-md-12 div(这允许您更改答案而无需加倍响应 div)。

(3) 然后我们构建我们将插入的 col-md-12，从上面的步骤 (1) 中获取唯一文本

(4) 最后，我们将新构造的 div 附加到类为 .row 的 closest() 父 div

请注意，我只让前两个“问题”起作用，而且外观很不稳定，但这应该让您了解如何让它起作用。

$(document).on('click', '[id^=radio]', function(){
  var userresp = this.value;
  var ans = $(this).data('more');
  var ques = $(this).closest('.row');
  $(ques).find('.col-md-12').slideUp().remove();
  if (userresp == 'fout'){
    $('<div class="col-md-12">' +ans+ '</div>').appendTo(ques).slideDown();
  }
});

* {position: relative;box-sizing: border-box;}
body {width: 80%;}
.col-md-12{width:95%;border:1px solid green;display:none;}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<div class="container">
  <div class="row" id="questionrow">
    <div class="col-md-8">
      <input name="questionvalue" class="questionclass" type="text" value="Is de werkplek zodanig afgezet dat veilig gewerkt kan worden en dat er geen gevaar is voor omstanders/passanten?">
    </div>
    <div class="col-md-4">

      <div class="container text-right">
        <input type="radio" name="questionlist[Algemeen][Is de werkplek zodanig afgezet dat veilig gewerkt kan worden en dat er geen gevaar is voor omstanders/passanten?]" id="radio-1" value="ok" data-more="Why OK is wrong" required="">
        <label class="radiotoggle" for="radio-1"><span class="radio">Ok</span></label>
        <input type="radio" name="questionlist[Algemeen][Is de werkplek zodanig afgezet dat veilig gewerkt kan worden en dat er geen gevaar is voor omstanders/passanten?]" id="radio-2" value="fout" data-more="Why fout is also wrong">
        <label class="radiotoggle" for="radio-2"><span class="radio">Fout</span></label>
        <input type="radio" name="questionlist[Algemeen][Is de werkplek zodanig afgezet dat veilig gewerkt kan worden en dat er geen gevaar is voor omstanders/passanten?]" id="radio-3" value="nvt" checked="" data-more="Why nvt is correct">
        <label class="radiotoggle" for="radio-3"><span class="radio">N.v.t</span></label>
      </div>
    </div>
  </div>
  <div class="row" id="questionrow">
    <div class="col-md-8">
      <input name="questionvalue" class="questionclass" type="text" value="Zijn de medewerkers op de hoogte van de specifieke VGM-regels voor het uitvoeren van de werkzaamheden (TRA)?">
    </div>
    <div class="col-md-4">

      <div class="container text-right">
        <input type="radio" name="questionlist[Algemeen][Zijn de medewerkers op de hoogte van de specifieke VGM-regels voor het uitvoeren van de werkzaamheden (TRA)?]" id="radio-4" value="ok" required="" data-more="Second ques OK is wrong">
        <label class="radiotoggle" for="radio-4"><span class="radio">Ok</span></label>
        <input type="radio" name="questionlist[Algemeen][Zijn de medewerkers op de hoogte van de specifieke VGM-regels voor het uitvoeren van de werkzaamheden (TRA)?]" id="radio-5" value="fout" data-more="Second ques - fout is right-on!">
        <label class="radiotoggle" for="radio-5"><span class="radio">Fout</span></label>
        <input type="radio" name="questionlist[Algemeen][Zijn de medewerkers op de hoogte van de specifieke VGM-regels voor het uitvoeren van de werkzaamheden (TRA)?]" id="radio-6" value="nvt" checked="" data-more="Second question blah blah">
        <label class="radiotoggle" for="radio-6"><span class="radio">N.v.t</span></label>
      </div>
    </div>
  </div>
  <div class="row" id="questionrow">
    <div class="col-md-8">
      <input name="questionvalue" class="questionclass" type="text" value="Weten medewerkers wat zij moeten doen in geval van nood?">
    </div>
    <div class="col-md-4">

      <div class="container text-right">
        <input type="radio" name="questionlist[Algemeen][Weten medewerkers wat zij moeten doen in geval van nood?]" id="radio-7" value="ok" required="">
        <label class="radiotoggle" for="radio-7"><span class="radio">Ok</span></label>
        <input type="radio" name="questionlist[Algemeen][Weten medewerkers wat zij moeten doen in geval van nood?]" id="radio-8" value="fout">
        <label class="radiotoggle" for="radio-8"><span class="radio">Fout</span></label>
        <input type="radio" name="questionlist[Algemeen][Weten medewerkers wat zij moeten doen in geval van nood?]" id="radio-9" value="nvt" checked="">
        <label class="radiotoggle" for="radio-9"><span class="radio">N.v.t</span></label>
      </div>
    </div>
  </div>
  <div class="row" id="questionrow">
    <div class="col-md-8">
      <input name="questionvalue" class="questionclass" type="text" value="Zijn de voorgeschreven veiligheidsmaatregelen toegepast en worden deze nageleefd (LMRA)?">
    </div>
    <div class="col-md-4">

      <div class="container text-right">
        <input type="radio" name="questionlist[Algemeen][Zijn de voorgeschreven veiligheidsmaatregelen toegepast en worden deze nageleefd (LMRA)?]" id="radio-10" value="ok" required="">
        <label class="radiotoggle" for="radio-10"><span class="radio">Ok</span></label>
        <input type="radio" name="questionlist[Algemeen][Zijn de voorgeschreven veiligheidsmaatregelen toegepast en worden deze nageleefd (LMRA)?]" id="radio-11" value="fout">
        <label class="radiotoggle" for="radio-11"><span class="radio">Fout</span></label>
        <input type="radio" name="questionlist[Algemeen][Zijn de voorgeschreven veiligheidsmaatregelen toegepast en worden deze nageleefd (LMRA)?]" id="radio-12" value="nvt" checked="">
        <label class="radiotoggle" for="radio-12"><span class="radio">N.v.t</span></label>
      </div>
    </div>
  </div>
  <div class="row" id="questionrow">
    <div class="col-md-8">
      <input name="questionvalue" class="questionclass" type="text" value="Zijn de medewerkers op de hoogte van de algemene VGM-regels (VGM-instructie)?">
    </div>
    <div class="col-md-4">

      <div class="container text-right">
        <input type="radio" name="questionlist[Algemeen][Zijn de medewerkers op de hoogte van de algemene VGM-regels (VGM-instructie)?]" id="radio-13" value="ok" required="">
        <label class="radiotoggle" for="radio-13"><span class="radio">Ok</span></label>
        <input type="radio" name="questionlist[Algemeen][Zijn de medewerkers op de hoogte van de algemene VGM-regels (VGM-instructie)?]" id="radio-14" value="fout">
        <label class="radiotoggle" for="radio-14"><span class="radio">Fout</span></label>
        <input type="radio" name="questionlist[Algemeen][Zijn de medewerkers op de hoogte van de algemene VGM-regels (VGM-instructie)?]" id="radio-15" value="nvt" checked="">
        <label class="radiotoggle" for="radio-15"><span class="radio">N.v.t</span></label>
      </div>
    </div>
  </div>
</div>