jQuery verstecken/zeigen Inhalte basierend auf gemeinsamen Eltern

Question

Ich habe diese wiederholte HTML-Code.

<div id="id1" class="questio"> 
    <input type="checkbox" class="c1"> 
    <div class="c2">Content</div> 
</div> 

<div id="id2" class="questio">  
    <input type="checkbox" class="c1"> 
    <div class="c2">Another Content</div> 
</div> 

<div id="id3" class="questio"> 
    <input type="checkbox" class="c1"> 
    <div class="c2">Another Content</div>  
</div> 

Das gewünschte Verhalten ist/show div c2 Inhalt für jeden Abschnittunabhängig auf input.c1 basierend zu verstecken geprüft oder nicht:

if ($(".c1").is(":checked")) {  
    $('.c2').show(); 
} 

Ich versuchte somethig wie diese, aber ich kann nicht gehen:

$("input.c1").each(function() { 
    var parent1 = $(this).closest('questio');  
    if ($(this).is(":checked")) { 
     /// ?? 
    } 
}); 

Answer 1

Sie waren ziemlich nah dran.

//you can find the c1's that are checked 
$(".c1:checked").each(function() { 
    //you can then find their parent questio (with the '.' for the selector) 
    //then find the related c2 and show it. 
    $(this).closest('.questio').find('.c2').show(); 
}); 

Obwohl Ihr Markup gegeben wurde, könnten Sie dies komplett mit CSS tun.

.questio .c1:not(:checked) + .c2 { 
 
    display: none; 
 
}

<div id="id1" class="questio"> 
 
    <input type="checkbox" class="c1"> 
 
    <div class="c2">Content</div> 
 
</div> 
 

 
<div id="id2" class="questio"> 
 
    <input type="checkbox" class="c1"> 
 
    <div class="c2">Another Content</div> 
 
</div> 
 

 
<div id="id3" class="questio"> 
 
    <input type="checkbox" class="c1"> 
 
    <div class="c2">Another Content</div> 
 
</div>

Answer 2

Try this:

var div1 = $("id1"); 
var c2OfDiv1 = div1.find(".c2"); 
c2OfDiv1.hide(); //or c2OfDiv1.show(); 

Answer 3

Sie müssen this verwenden, um auf das Element zu verweisen, auf das geklickt wird. Andernfalls richten Sie das Targeting auf zu viele Elemente aus, die Sie nicht benötigen.

$('input.c1').click(function() { 
 
    $(this).next('div.c2').toggle($(this).is(":checked")) 
 
})

.c2 { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="id1" class="questio"> 
 

 
    <input type="checkbox" class="c1"> 
 
    <div class="c2">Content</div> 
 

 
</div> 
 

 
<div id="id2" class="questio"> 
 

 
    <input type="checkbox" class="c1"> 
 
    <div class="c2">Another Content</div> 
 

 
</div> 
 

 
<div id="id3" class="questio"> 
 

 
    <input type="checkbox" class="c1"> 
 
    <div class="c2">Another Content</div> 
 

 
</div>

Answer 4

können Sie verwenden parent(), wie dieser Kurz Hand:

$(".c1").on('change', function() { 
 
    var parent = $(this).parent().find('.c2'); 
 
    parent[$(this).is(":checked") ? "show" : "hide"](); 
 
});

.c2 { 
 
    display:none 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="id1" class="questio"> 
 

 
    <input type="checkbox" class="c1"> 
 
    <div class="c2">Content</div> 
 

 
</div> 
 

 
<div id="id2" class="questio"> 
 

 
    <input type="checkbox" class="c1"> 
 
    <div class="c2">Another Content</div> 
 

 
</div> 
 

 
<div id="id3" class="questio"> 
 

 
    <input type="checkbox" class="c1"> 
 
    <div class="c2">Another Content</div> 
 

 
</div>