チェックボックスの状態に応じてdivを切り離す/再接続する

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メソッドを使用することができます。

もう1つの問題は、トグルされたコンテンツが再表示されないことです。以前は でした。

問題は、要素の末尾に追加するappendメソッドでコンテンツを追加していたことでした。

$('.2').hide(); 
 

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

<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>