文章/答案/技术大牛

发布

社区首页 >问答首页 >检查单选按钮时如何滑动div

问检查单选按钮时如何滑动div
EN

Stack Overflow用户

提问于 2019-02-04 19:03:00

回答 5查看 89关注 0票数 1

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

它们是：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，当选择fout时，我需要将fout添加到DOM中。

javascript

jquery

html

回答 5

Stack Overflow用户

回答已采纳

发布于 2019-02-04 19:43:13

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

(1)使用HTML属性为每个input无线电响应存储一些文本(如果愿意，可以使用其他方法，但这是可行的)。当单击按钮时，我们获取存储在这里的任何文本，并将其保存到变量中。

(2)然后删除可能已经添加的任何col-md-12 div(这允许您更改答案而不将响应div加倍)。

(3)然后构建要插入的col-md-12，从上面的步骤(1)获得唯一的文本

(4)最后，我们将新构造的div附加到具有类closest()的.row父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>

票数 2

Stack Overflow用户

发布于 2019-02-04 21:51:41

例3.

此示例演示如何根据data-more标记上的<input>属性中的文本将不同的消息插入到附加的<input>中。

*这是最初的答案，在我意识到只有单击fout按钮时，您才特别希望消息DIV出现。但是，我希望您在一个更完整的示例中看到使用data-more属性的效果，因此我重新构建了这个原始答案。

比较这两个例子，您将看到javascript中的差异非常非常小。

$(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();
  $('<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="" data-more="DID NOT DO THESE ONES...!">
        <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>

票数 1

Stack Overflow用户

发布于 2019-02-04 19:05:17

使用Jquery切换，点击无线电台，反之亦然。在Jquery中使用Append函数。然后找到父对象来找到要追加的子元素，然后您可以添加您想要的HTML内容。

http://api.jquery.com/append/

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/54522698

复制

相似问题

问检查单选按钮时如何滑动div
EN

回答 5

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问检查单选按钮时如何滑动divEN

回答 5

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问检查单选按钮时如何滑动div
EN