Question

我正在尝试根据复选框状态切换2个div，但无法使其工作。

如果选中该复选框，则只显示div类“2”。如果未选中该复选框，则仅显示div 1。

我得到了一半的工作方式，但无法弄清楚如何正确切换内容。另一个问题是切换的内容不会重新出现在以前的位置。

<input type="checkbox" id="toggle">

<div class="content">
<p>Lorem ipsum <span class="1">1</span><span class="2">2</span> dolor sit</p>
</div>

y = $('.2').detach();
var x;
$('#toggle').change(function() {
 if (!this.checked)
   x = $('.1').detach();
 else
   $('.content').append(x);
});

See my Fiddle

Answer 1

您只需使用show和hide方法根据所选复选框的条件切换内容。

另一个问题是切换的内容不会重新出现在哪里它就在以前。

问题在于您使用append方法追加内容，并将其附加到元素的末尾。

＆＃13;

$('.2').hide();

$('#toggle').change(function() {
  if (this.checked){
    $('.2').show();
    $('.1').hide();
    return
    }
  $('.2').hide();
  $('.1').show();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<input type="checkbox" id="toggle">

<div class="content">
<p>Lorem ipsum 
<span class="1">1</span>
<span class="2">2</span> 
dolor sit
</p>
</div>

＆＃13;

根据复选框状态分离/重新附加div

1 个答案: