使用单选按钮的嵌套问题切换

Posted

技术标签:

【中文标题】使用单选按钮的嵌套问题切换【英文标题】：Nested Question Toggle using Radio Buttons 【发布时间】：2020-10-02 09:32:15 【问题描述】：

我有一个使用单选按钮和 javascript/jQuery 的相对简单的嵌套问题设置，它根据您单击的按钮显示/隐藏额外信息（是显示，否隐藏）：

这是 html：

          <div class="form-nest panel-question d-flex justify-content-start">
              <span class="icon icon-primary icon-medium icon-roundel icon-vehicle align-self-start mr-2 mr-md-4"></span>
                            <div class="question-wrapper">
            <h2 class="heading-epsilon">Are you interested in RAC Breakdown Cover for complete peace of mind?</h2>
           <!-- Yes/no Open-->
          <div class="form-row form-inline">
            <div class="form-check form-check-inline"><input class="form-check-input form-check-input-button" type="radio" name="buttonRadio3" id="buttonRadio5"><label for="buttonRadio5">Yes</label></div>
            <div class="form-check form-check-inline"><input class="form-check-input form-check-input-button" type="radio" name="buttonRadio3" id="buttonRadio6"><label for="buttonRadio6">No</label></div>
          </div>
           <!-- Yes/no closed -->

            </div><!--question-wrapper-->
        </div><!-- Form Nest Close-->
        <!--Nested container open -->
          <div class="nested-container">
            <div id="buttonRadio5-nest" class="nested-content">
              <ul class="list list-icons">
              <li class="list-item list-icon list-icon-tick">Pays out regardless of whether the accident was fault or non-fault</li>
              <li class="list-item list-icon list-icon-tick">Covers named drivers and passengers</li>
              <li class="list-item list-icon list-icon-tick">Covers the policy holder when driving other vehicles if they don't own the vehicle</li>
              </ul>
            <a href="#">View more product information</a>
            <p><strong>+ £40.00</strong> per year</p>
            <div class="form-row form-inline">
              <div class="form-check form-check-inline"><input class="form-check-input form-check-input-button" type="checkbox" name="buttonCheckbox1" id="buttonCheckbox1"><label for="buttonCheckbox1">Add</label></div>
            </div>
            </div>
          </div><!-- Nested container closed -->

还有 JS/jQuery：

function nestedPanelHide(ele) 
  var eleId = "#" + ele,
      nestWrap = $(eleId).closest(".form-nest"),
      nestCont = nestWrap.next(".nested-container");

  nestCont.children().hide();


function nestedPanelShow(ele)   
  var eleId = "#" + ele,
      nestWrap = $(eleId).closest(".form-nest"),
      nestCont = nestWrap.next(".nested-container"),
      eleNestId = eleId + "-nest",
      nestFields = nestCont.children(eleNestId);

  nestedPanelHide(ele);
  nestFields.show();


$(document).ready(function()

  $(".nested-content").hide();

  // Find each form with nest class
  $(".form-nest").each(function( index ) 

    // Find nest conts
    var nest = $(this),
        nestCont = nest.next(".nested-container");

    // For each nest cont
    for (var i = 0; i < nestCont.length; i++) 

      // Find nest opts in cont
      var nestOpt = nestCont[i].children;

      // For each nest opt add click event
      for (var j = 0; j < nestOpt.length; j++) 

        // Get cont id, trim to form ele id
        var id = nestOpt[j].id,
            str = id.substr(0, id.lastIndexOf("-")),
            eleId = "#" + str;

        // Add class to ele to remove from later look up
        $(eleId).parent().addClass("nest-btn");

        // Add show event listener to ele
        $(eleId).on("click", function()           
          var id = $(this).attr("id");
          nestedPanelShow(id);
        );
      
    

    // Find nest opts
    var nestOpts = nest.children();

    // For each nest opt
    for (var k = 0; k < nestOpts.length; k++) 

      // Get this opt
      var opt = $(nestOpts[k]);

      // If opt does not have class nest-btn
      if (!opt.hasClass("nest-btn")) 

        // Add hide event listener to opt
        $(opt.children()).on("click", function()           
          var id = $(this).attr("id");
          nestedPanelHide(id);
        );
      
    
  );
);

function nestedPanelHide(ele) 
  var eleId = "#" + ele,
      nestWrap = $(eleId).closest(".form-nest"),
      nestCont = nestWrap.next(".nested-container");

  nestCont.children().hide();


function nestedPanelShow(ele)   
  var eleId = "#" + ele,
      nestWrap = $(eleId).closest(".form-nest"),
      nestCont = nestWrap.next(".nested-container"),
      eleNestId = eleId + "-nest",
      nestFields = nestCont.children(eleNestId);

  nestedPanelHide(ele);
  nestFields.show();


$(document).ready(function()

  $(".nested-content").hide();

  // Find each form with nest class
  $(".form-nest").each(function( index ) 

    // Find nest conts
    var nest = $(this),
        nestCont = nest.next(".nested-container");

    // For each nest cont
    for (var i = 0; i < nestCont.length; i++) 

      // Find nest opts in cont
      var nestOpt = nestCont[i].children;

      // For each nest opt add click event
      for (var j = 0; j < nestOpt.length; j++) 

        // Get cont id, trim to form ele id
        var id = nestOpt[j].id,
            str = id.substr(0, id.lastIndexOf("-")),
            eleId = "#" + str;

        // Add class to ele to remove from later look up
        $(eleId).parent().addClass("nest-btn");

        // Add show event listener to ele
        $(eleId).on("click", function()           
          var id = $(this).attr("id");
          nestedPanelShow(id);
        );
      
    

    // Find nest opts
    var nestOpts = nest.children();

    // For each nest opt
    for (var k = 0; k < nestOpts.length; k++) 

      // Get this opt
      var opt = $(nestOpts[k]);

      // If opt does not have class nest-btn
      if (!opt.hasClass("nest-btn")) 

        // Add hide event listener to opt
        $(opt.children()).on("click", function()           
          var id = $(this).attr("id");
          nestedPanelHide(id);
        );
      
    
  );
);


(function($) 

$('.label-yes').click(function() 
    $(this).closest('.nested-content').addClass('open');
);

$('.label-no').click(function() 
    $(this).closest('.nested-content').removeClass('open');
);

)(jQuery);

当您单击“是”时，我可以获得要显示的额外信息，但当您单击“否”时，我无法再次隐藏它。我已经尝试逐行查看是否可以确定我的错误可能在哪里。我觉得这很简单，但我担心我可能会因为盯着它看太多代码而失明。

我在这里有一个 JSfiddle，它向您展示了我想要实现的基础 - 我已经去掉了样式，因为它可能会泄露这是给谁的（它是客户工作），但基本功能就在那里：

https://jsfiddle.net/3y4b25uk/

我们将不胜感激任何可以提供的帮助或指导，因为我正竭尽全力试图让它发挥作用，而且它已经快到了。

谢谢。

【问题讨论】：

【参考方案1】：

您的代码有一些问题 - 没有类 label-yes 和 label-no 的元素，没有类 open，click() 事件中的选择器为 label-yes 和 label-no 做不要选择类 nested-content 的 div，因为 closest 不能选择它。具有嵌套内容类的 div 在单击“是”时显示，这不是因为附加到 label-yes 的 click() 事件，而是因为您之前在 @987654332 的代码中的 click() 事件@函数：

$(eleId).on("click", function() 
   var id = $(this).attr("id");
   nestedPanelShow(id);
);

为了让 label-yes 和 label-no 的 click() 函数正常工作，我将这些类添加到输入元素中，添加类 open，通过 CSS 将 nested-content 元素设置为 display:none并调整了click()事件中的选择器

 $(this).closest('.nested-content')

到

 $(this).closest(".form-nest").next(".nested-container").find(".nested-content")

工作示例：

function nestedPanelHide(ele) 
  var eleId = "#" + ele,
    nestWrap = $(eleId).closest(".form-nest"),
    nestCont = nestWrap.next(".nested-container");

  nestCont.children().hide();


function nestedPanelShow(ele) 
  var eleId = "#" + ele,
    nestWrap = $(eleId).closest(".form-nest"),
    nestCont = nestWrap.next(".nested-container"),
    eleNestId = eleId + "-nest",
    nestFields = nestCont.children(eleNestId);

  nestedPanelHide(ele);
  nestFields.show();


$(document).ready(function() 

  $(".nested-content").hide();

  // Find each form with nest class
  $(".form-nest").each(function(index) 

    // Find nest conts
    var nest = $(this),
      nestCont = nest.next(".nested-container");

    // For each nest cont
    for (var i = 0; i < nestCont.length; i++) 

      // Find nest opts in cont
      var nestOpt = nestCont[i].children;

      // For each nest opt add click event
      for (var j = 0; j < nestOpt.length; j++) 

        // Get cont id, trim to form ele id
        var id = nestOpt[j].id,
          str = id.substr(0, id.lastIndexOf("-")),
          eleId = "#" + str;

        // Add class to ele to remove from later look up
        $(eleId).parent().addClass("nest-btn");

        // Add show event listener to ele
        $(eleId).on("click", function() 
          var id = $(this).attr("id");
          nestedPanelShow(id);
        );
      
    

    // Find nest opts
    var nestOpts = nest.children();

    // For each nest opt
    for (var k = 0; k < nestOpts.length; k++) 

      // Get this opt
      var opt = $(nestOpts[k]);

      // If opt does not have class nest-btn
      if (!opt.hasClass("nest-btn")) 

        // Add hide event listener to opt
        $(opt.children()).on("click", function() 
          var id = $(this).attr("id");
          nestedPanelHide(id);
        );
      
    
  );
);

function nestedPanelHide(ele) 
  var eleId = "#" + ele,
    nestWrap = $(eleId).closest(".form-nest"),
    nestCont = nestWrap.next(".nested-container");

  nestCont.children().hide();


function nestedPanelShow(ele) 
  var eleId = "#" + ele,
    nestWrap = $(eleId).closest(".form-nest"),
    nestCont = nestWrap.next(".nested-container"),
    eleNestId = eleId + "-nest",
    nestFields = nestCont.children(eleNestId);

  nestedPanelHide(ele);
  nestFields.show();


$(document).ready(function() 

  $(".nested-content").hide();

  // Find each form with nest class
  $(".form-nest").each(function(index) 

    // Find nest conts
    var nest = $(this),
      nestCont = nest.next(".nested-container");

    // For each nest cont
    for (var i = 0; i < nestCont.length; i++) 

      // Find nest opts in cont
      var nestOpt = nestCont[i].children;

      // For each nest opt add click event
      for (var j = 0; j < nestOpt.length; j++) 

        // Get cont id, trim to form ele id
        var id = nestOpt[j].id,
          str = id.substr(0, id.lastIndexOf("-")),
          eleId = "#" + str;

        // Add class to ele to remove from later look up
        $(eleId).parent().addClass("nest-btn");

        // Add show event listener to ele
        $(eleId).on("click", function() 
          var id = $(this).attr("id");
          nestedPanelShow(id);
        );
      
    

    // Find nest opts
    var nestOpts = nest.children();

    // For each nest opt
    for (var k = 0; k < nestOpts.length; k++) 

      // Get this opt
      var opt = $(nestOpts[k]);

      // If opt does not have class nest-btn
      if (!opt.hasClass("nest-btn")) 

        // Add hide event listener to opt
        $(opt.children()).on("click", function() 
          var id = $(this).attr("id");
          nestedPanelHide(id);
        );
      
    
  );
);


(function($) 

  $('.label-yes').click(function() 
  $(this).closest(".form-nest").next(".nested-container").find(".nested-content").addClass("open");
  );

  $('.label-no').click(function() 
  $(this).closest(".form-nest").next(".nested-container").find(".nested-content").removeClass("open");
  );

)(jQuery);
.sandbox
     .panel-question
      display: flex;
      flex-direction: row;
    
    .form-row.form-inline 
    width: 100%;
    

.nested-content 
  display:none;

.open 
  display:block;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="sandbox">
  <div class="container">
    <div class="row">
      <div class="col">
        <div class="panel">
          <div class="panel-content">
            <div class="form-nest panel-question d-flex justify-content-start">
              <span class="icon icon-primary icon-medium icon-roundel icon-vehicle align-self-start mr-2 mr-md-4"></span>
              <div class="question-wrapper">
                <h2 class="heading-epsilon">Are you interested in RAC Breakdown Cover for complete peace of mind?</h2>
                <!-- Yes/no Open-->
                <div class="form-row form-inline">
                  <div class="form-check form-check-inline"><input class="form-check-input form-check-input-button label-yes" type="radio" name="buttonRadio3" id="buttonRadio5"><label for="buttonRadio5">Yes</label></div>
                  <div class="form-check form-check-inline"><input class="form-check-input form-check-input-button label-no" type="radio" name="buttonRadio3" id="buttonRadio6"><label for="buttonRadio6">No</label></div>
                </div>
                <!-- Yes/no closed -->

              </div>
              <!--question-wrapper-->
            </div><!-- Form Nest Close-->
            <!--Nested container open -->
            <div class="nested-container">
              <div id="buttonRadio5-nest" class="nested-content">
                <ul class="list list-icons">
                  <li class="list-item list-icon list-icon-tick">Pays out regardless of whether the accident was fault or non-fault</li>
                  <li class="list-item list-icon list-icon-tick">Covers named drivers and passengers</li>
                  <li class="list-item list-icon list-icon-tick">Covers the policy holder when driving other vehicles if they don't own the vehicle</li>
                </ul>
                <a href="#">View more product information</a>
                <p><strong>+ £40.00</strong> per year</p>
                <div class="form-row form-inline">
                  <div class="form-check form-check-inline"><input class="form-check-input form-check-input-button" type="checkbox" name="buttonCheckbox1" id="buttonCheckbox1"><label for="buttonCheckbox1">Add</label></div>
                </div>
              </div>
            </div><!-- Nested container closed -->

          </div>
        </div>
      </div>
    </div>
  </div>
</section>

请注意，带有类 nested-content 的 &lt;div&gt; 现在会显示，原因有两个：一次是因为 label-yes 上的工作 click() 事件处理程序，另外是因为之前的 click() 事件调用函数nestedPanelShow()。我不确定您是否要删除此 click() 事件或重新编写代码，以便您还将 click() 事件附加到“否”的输入，并且可以省略附加到 @ 的其他 click() 事件987654352@ 和label-no。我在这个Fiddle 中向这个事件处理程序添加了一条控制台消息。

【讨论】：

以上是关于使用单选按钮的嵌套问题切换的主要内容，如果未能解决你的问题，请参考以下文章

如何链接一组切换按钮，如单选按钮？

嵌套表单中单选按钮的 OnChange 事件

Bootstrap单选按钮切换问题

使用 Bootstrap 4 展开单选按钮切换

在Vuejs上切换单选按钮后选定的文件消失

使用 Twitter Bootstrap 切换单选按钮，获取表单输入的简洁方式是啥？