fadeIn/fadeOutチェックボックスがチェックされたときに最も近いdiv

Question

私は、ユーザが特に有効にしない限り、表示したくないいくつかのオプションのフィールドを持つフォームを持っています。私はいくつかのガイダンスを期待して、jQueryの.closest()メソッドを理解するのに苦労しています。このように複数の形式があるので、私はDRYのために#idを私たちに欲していませんでした。

$('.enable-stage').change(function() { 
 
    if ($(this).is(':checked')) { 
 
    $(this).closest('.stage-dates').fadeIn("slow").toggleClass("hidden"); 
 
    } else { 
 
    $(this).closest('.stage-dates').fadeOut("slow").toggleClass("hidden"); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="stage"> 
 
    <h3>Stage Name</h3> 
 
    <label><input type="checkbox" class="enable-stage"> Enable Stage</label> 
 
    <div class="stage-dates hidden"> 
 
    <input type="date"> 
 
    </div> 
 
</div>

if内部console.log("checked")とconsole.log("unchecked")を使用した場合、それが動作するので、私は一般的なif文が働いている知っています。私は.closestメソッドを誤って扱っていると思いますが、どのように/なぜかわかりません。

編集：明確にするため、チェックボックスをオンにすると最も近い.stage-dates divがフェードインされ、チェックが外されるとフェードアウトされます。

Answer 1

$.closest()は、選択した要素の最初の祖先を返します。 DOM全体を検索せずに最も近いものを返します。 （labelチェックボックスに祖先であるため）ここ$.closest()を使用するには、我々は.stage-dates

$('.enable-stage').change(function() { 
 
    var $closest = $(this).closest('label').next('.stage-dates'); 
 
    if ($(this).is(':checked')) { 
 
    $closest.fadeIn("slow").toggleClass("hidden"); 
 
    } else { 
 
    $closest.fadeOut("slow").toggleClass("hidden"); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="stage"> 
 
    <h3>Stage Name</h3> 
 
    <label><input checked type="checkbox" class="enable-stage"> Enable Stage</label> 
 
    <div class="stage-dates hidden"> 
 
     <input type="date"> 
 
    </div> 
 
</div>