jQuery 隐藏/显示基于共同父级的内容

Question

我重复了 HTML 代码。

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

想要的行为是隐藏/显示 div 每个部分的 c2 内容独立基于 input.c1 检查与否：

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

我试过这样的东西，但我不能继续:

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

Answer 1

试试这个：

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

Answer 2

您需要使用 this 来引用被点击的元素，否则您将定位太多不需要的元素。

$('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 3

你们很接近。

//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();
});

尽管根据您的标记，您完全可以使用 css 来完成此操作。

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

你可以使用 parent()，像这样简写：

$(".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>

jQuery 隐藏/显示基于共同父级的内容

jQuery hide / show content based on common parent

html

jquery

parent