Question

目前，当点击左栏中的复选框时，我使用JS在右栏中生成一个文本块。

这个工作正常，但每次我需要添加一个复选框时，我需要添加一个新类和新的formContainer元素。我原来的3个，并不是什么大不了的事。但是现在我已经达到了10而且还在增长，变得有点麻烦。

由于勾选复选框，在页面的不同部分生成div /文本块有哪些更好的可能性？

复选框

 <input id="chk" data-detail="<br>Right 1" class="chkbox" type="checkbox" value="results" />1

创建个别课程

  <div class="formContainer"></div>

脚本

 <script>
 $('.chkbox').on('click',function(){
if($(this).is(':checked'))
{
   $('.formContainer').html('<div      class="new">'+$(this).data('detail')+'</div>');
}
else
{
    $('.formContainer').html('');
}
});
 </script>

Answer 1

根据您的需要和div的内容，我得到了一些建议：

模态弹出窗口。如果你这些div只是通知，那么弹出窗口会做（但怀疑这是你需要的）。
列表组，使用bootstrap的整齐的类list group来显示<ul>元素中所需的信息，这些元素附带的JS也可以使用特殊的动画。
在每个复选框上使用tooltips，而不是显示整个div。
我最不喜欢的最后一个建议是将所有div放在右侧的单个容器div中。修复其宽度和高度并设置溢出属性，以便您可以向上和向下滚动显示的div

Answer 2

如果您希望在列中使用它们，可以使用bootstrap网格系统生成它们。

<div class="formContainer>
<div class="container">
  <div class="row">
    <div class="col-m-4"></div>
    <div class="col-m-4"></div>
    <div class="col-m-4"></div>
  </div>
  <div class="row">
    ...
  </div>
</div> 
</div>

如果您想将它们保存在同一列中，您可以使用.append（）

$('.formContainer').append('<div      class="new">'+$(this).data('detail')+'</div>');

这些可以一起用于生成流体系统，或者只是附加可用于继续向formContainer添加div

Answer 3

我建议使用Jquery函数在复选框后附加一个表单.after（newElement）;

Play with it on codepen

HTML：

<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<style>
  .formContainer{
  height: 50px;
  width: 100%;
  background-color: gray;
}
</style>  

<label class="checkboxLabel">
  <input class="checkboxesThatAppends" type="checkbox" value="results" />
  Show me a form
</label>

<label class="checkboxLabel">
  <input class="checkboxesThatAppends" type="checkbox" value="results" />
  Show me a form
</label>

<label class="checkboxLabel">
  <input class="checkboxesThatAppends" type="checkbox" value="results" />
  Show me a form
</label>

<label class="checkboxLabel">
  <input class="checkboxesThatAppends" type="checkbox" value="results" />
  Show me a form
</label>

JQuery的：

$(document).ready(function(){

  $('.checkboxesThatAppends').click(function(){
    var associatedFormId = $(this).attr('data-associated-form-id');
    if(associatedFormId){
      //if there is a form container associated with this checkbox already
      //then let's remove that form.
      //and remove the association from the checkbox
      $('#'+associatedFormId).remove();
      $(this).attr('data-associated-form-id', '');
    }else{
      //generate an Id for the new form to attach.
      var newId = new Date().getTime();
      $(this).attr('data-associated-form-id', newId);
      $(this).parent().after('<div id="'+newId+'" class="formContainer"></div> ');
    }
  });

});

Answer 4

您可以将jQuery的append()和remove()方法与包装HTML元素结合使用以实现此效果。

JSFiddle： https://jsfiddle.net/xuc4tze0/1/

<强> HTML

<div class="row">
  <div class="left">
    <input id="chk" data-detail="Right 1" class="chkbox" type="checkbox" value="results" />1
  </div>
</div>
<div class="row">
  <div class="left">
    <input id="chk" data-detail="Right 2" class="chkbox" type="checkbox" value="results" />2
  </div>
</div>
<div class="row">
  <div class="left">
    <input id="chk" data-detail="Right 3" class="chkbox" type="checkbox" value="results" />3
  </div>
</div>

<强> CSS

.row {
  display: flex;
  width: 400px;
}

.left, .right {
  flex: 0 0 50%;
}

Javascript / jQuery

$('.chkbox').on('click', function() {
  if ($(this).is(':checked')) 
    // Find the row and add the 'right' column
    $(this).closest('.row').append('<div class="right">' + $(this).data('detail') + '</div>');
  } else {
    // Find the 'right' column and remove it
    $(this).closest('.row').find('.right').remove();
  }
});

通过复选框

4 个答案: