使用单选按钮进行嵌套式问题切换。

问题描述 投票:0回答:1

我有一个相对简单的嵌套问题设置,使用单选按钮和JavaScriptjQuery,它可以根据你点击的按钮显示隐藏额外的信息(是显示,否隐藏)。

下面是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 -->

和JSjQuery。

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.net3y4b25uk。

任何可以提供的帮助或指导将非常感激,因为我在我的束缚的尽头,试图让它工作,它是如此接近。

谢谢你的帮助。

javascript html jquery forms radio-button
1个回答
0
投票

你的代码有一些问题 - 没有元素与类 label-yeslabel-no,没有班级 open的选择器。click() 的活动 label-yeslabel-no 不要选择带有类的DIV nested-content 因为这个不能用 closest. 点击 "是 "后,带有嵌套内容的div就会显示出来,而不是因为 "是"。click() 事件 label-yes但由于你的代码中前面的click()事件,你在 $(".form-nest").each() 函数。

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

为了让label-yes和label-no的click()函数能正常工作,我在输入元素中添加了这些类,在类中添加了 open,设置 nested-content 要素 display:none 中的选择器,并通过CSS调整了 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>

注意: <div> 同级 nested-content 现在得到显示的原因有2个:一次是由于工作中的 click() 事件处理程序 label-yes此外,由于之前的 click() 事件,调用函数 nestedPanelShow(). 我不知道你要不要把这个删掉 click() 事件,或者重写你的代码,使你也附加一个 click() 事件到 "No "的输入,并可以省略额外的 click() 您所附加的事件 label-yeslabel-no. 我已经在这个事件处理程序中添加了一个控制台消息。小提琴.

© www.soinside.com 2019 - 2024. All rights reserved.