如果第一个div类匹配选择复选框

时间：2016-12-24 02:40:07

标签： javascript jquery

我有两个具有相同组名和子元素的div。第二个div元素将在页面加载时隐藏。当用户选择第一个div子元素时，具有组名的相应子元素应显示在第二个div上。如果用户在第一个div中选择respecitve选项，则隐藏在第二个div中。

<div class="group1" style="float: left;border: 1px solid green;">
<p class="category">Academic</p>
<p class="subject-list">
    <label for="Maths">
        <input type="checkbox" id="Maths" name="Maths">Maths
    </label>
</p>
<p class="subject-list">
    <label for="English">
        <input type="checkbox" id="English" name="English">English
    </label>
</p>
<p class="subject-list">
    <label for="Science">
        <input type="checkbox" id="Science" name="Science">Science
    </label>
</p>
<p class="category">Sports</p>
<p class="subject-list">
    <label for="Tennis">
        <input type="checkbox" id="Tennis" name="Tennis">Tennis
    </label>
</p>
<p class="subject-list">
    <label for="cricket">
        <input type="checkbox" id="cricket" name="cricket">cricket
    </label>
</p>
</div>
<div class="group2" style="float: right; border: 1px solid red; width: 200px; display: none;">
    <p class="category">Academic</p>
    <p class="subject-list">
        <label for="Maths">
            <div id="Maths" style="padding-left: 10px;">Maths</div>
        </label>
    </p>
    <p class="subject-list">
        <label for="English">
            <div id="English" style="padding-left: 10px;">English</div>
        </label>
    </p>
    <p class="subject-list">
        <label for="Science">
            <div id="Science" style="padding-left: 10px;">Science</div>
        </label>
    </p>
    <p class="category">Sports</p>
    <p class="subject-list">
        <label for="Tennis">
            <div id="Tennis" style="padding-left: 10px;">Tennis</div>
        </label>
    </p>
    <p class="subject-list">
        <label for="cricket">
            <div id="cricket" style="padding-left: 10px;">cricket</div>
        </label>
    </p>
</div>

假设用户在第一个div中选择Maths复选框，我应该在右侧div中看到“Academic”组名和“Maths”。

1 个答案:

答案 0 :(得分：1)

Fiddle

要在.group2中显示/隐藏单个项目，您不应该隐藏整个群组。而是隐藏单个项目，并在需要时显示它们。

修复HTML

首先从此行中删除display: none; 

<div class="group2" style="float: right; border: 1px solid red; width: 200px; display: none;">

然后删除所有id或将其更改为class，因为id应该是唯一的。

使用CSS隐藏项目

.group2 div {
  display: none;
}

使用JavaScript切换可见性

$('.group1').find('input').click(function(){
  var item = $(this).attr('name');
  $('.group2').find('.' + item).toggle();
});

完整代码

＆＃13;
＆＃13; 
$('.group1').find('input').click(function(){
  var item = $(this).attr('name');
  $('.group2').find('.' + item).toggle();
});
＆＃13; 
.group2 div {
  display: none;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="group1" style="float: left;border: 1px solid green;">
  <p class="category">Academic</p>
  <p class="subject-list">
    <label for="Maths">
      <input type="checkbox" class="Maths" name="Maths">Maths
    </label>
  </p>
  <p class="subject-list">
    <label for="English">
      <input type="checkbox" class="English" name="English">English
    </label>
  </p>
  <p class="subject-list">
    <label for="Science">
      <input type="checkbox" class="Science" name="Science">Science
    </label>
  </p>
  <p class="category">Sports</p>
  <p class="subject-list">
    <label for="Tennis">
      <input type="checkbox" class="Tennis" name="Tennis">Tennis
    </label>
  </p>
  <p class="subject-list">
    <label for="cricket">
      <input type="checkbox" class="cricket" name="cricket">cricket
    </label>
  </p>
</div>
<div class="group2" style="float: right; border: 1px solid red; width: 200px;">
  <p class="category">Academic</p>
  <p class="subject-list">
    <label for="Maths">
      <div class="Maths" style="padding-left: 10px;">Maths</div>
    </label>
  </p>
  <p class="subject-list">
    <label for="English">
      <div class="English" style="padding-left: 10px;">English</div>
    </label>
  </p>
  <p class="subject-list">
    <label for="Science">
      <div class="Science" style="padding-left: 10px;">Science</div>
    </label>
  </p>
  <p class="category">Sports</p>
  <p class="subject-list">
    <label for="Tennis">
      <div class="Tennis" style="padding-left: 10px;">Tennis</div>
    </label>
  </p>
  <p class="subject-list">
    <label for="cricket">
      <div class="cricket" style="padding-left: 10px;">cricket</div>
    </label>
  </p>
</div>
＆＃13;
＆＃13;
＆＃13;

更新（1） - 切换类别

Updated Fiddle (1)

要显示/隐藏类别而不更改HTML结构，您可以：

  • 跟踪每个类别存在多少活动项目
  • 循环显示每个类别，并根据该类别的活动项目数显示/隐藏

更新了代码（1）

＆＃13;
＆＃13; 
var totals = {};
$('.group1').find('input').click(function(){
  var itemName = $(this).attr('name');
  var item = $('.group2').find('.' + itemName).toggle();
  var change = $(this).is(':checked') ? 1 : -1;
  var category = $(this)
    	.closest('.subject-list')
      .prevAll('.category:first')
      .text();
  totals[category] = change + (totals[category] || 0);
  updateCategories();
});

function updateCategories() {  
  $('.group2').find('.category').each(function() {
  	var thisCat = $(this).html();
    if (thisCat in totals && totals[thisCat] > 0) {
    	$(this).show();
    } else {
    	$(this).hide();
    }
  });
}
＆＃13; 
.group2 div {
  display: none;
}
.group2 .category {
  display: none;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="group1" style="float: left;border: 1px solid green;">
  <p class="category">Academic</p>
  <p class="subject-list">
    <label for="Maths">
      <input type="checkbox" class="Maths" name="Maths">Maths
    </label>
  </p>
  <p class="subject-list">
    <label for="English">
      <input type="checkbox" class="English" name="English">English
    </label>
  </p>
  <p class="subject-list">
    <label for="Science">
      <input type="checkbox" class="Science" name="Science">Science
    </label>
  </p>
  <p class="category">Sports</p>
  <p class="subject-list">
    <label for="Tennis">
      <input type="checkbox" class="Tennis" name="Tennis">Tennis
    </label>
  </p>
  <p class="subject-list">
    <label for="cricket">
      <input type="checkbox" class="cricket" name="cricket">cricket
    </label>
  </p>
</div>
<div class="group2" style="float: right; border: 1px solid red; width: 200px;">
  <p class="category">Academic</p>
  <p class="subject-list">
    <label for="Maths">
      <div class="Maths" style="padding-left: 10px;">Maths</div>
    </label>
  </p>
  <p class="subject-list">
    <label for="English">
      <div class="English" style="padding-left: 10px;">English</div>
    </label>
  </p>
  <p class="subject-list">
    <label for="Science">
      <div class="Science" style="padding-left: 10px;">Science</div>
    </label>
  </p>
  <p class="category">Sports</p>
  <p class="subject-list">
    <label for="Tennis">
      <div class="Tennis" style="padding-left: 10px;">Tennis</div>
    </label>
  </p>
  <p class="subject-list">
    <label for="cricket">
      <div class="cricket" style="padding-left: 10px;">cricket</div>
    </label>
  </p>
</div>
＆＃13;
＆＃13;
＆＃13;

更新（2） - 带空格的标签

Updated Fiddle (2)

如果您想在标签中加入空格，可以camelize更改“{3;计算机科学＆＃39;到了计算机科学＆＃39; （用于对象键）。

更新了代码（2）

＆＃13;
＆＃13; 
var totals = {};
$('.group1').find('input').click(function(){
  var itemName = $(this).attr('name');
  var item = $('.group2').find('.' + itemName).toggle();
  var change = $(this).is(':checked') ? 1 : -1;
  var categoryText = $(this)
    	.closest('.subject-list')
      .prevAll('.category:first')
      .text();
  var category = camelize( categoryText );
  totals[category] = change + (totals[category] || 0);
  updateCategories();
});

function updateCategories() {  
  $('.group2').find('.category').each(function() {
  	var thisCat = camelize( $(this).html() );
    if (thisCat in totals && totals[thisCat] > 0) {
    	$(this).show();
    } else {
    	$(this).hide();
    }
  });
}
// From https://stackoverflow.com/a/2970667/5357459
function camelize(input) {
  return input.replace(/(?:^\w|[A-Z]|\b\w|\s+)/g, function(match, index) {
    if (+match === 0) { return ''; }
    return index === 0 ? match.toLowerCase() : match.toUpperCase();
  });
}
＆＃13; 
.group2 div {
  display: none;
}
.group2 .category {
  display: none;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="group1" style="float: left;border: 1px solid green;">
  <p class="category">Academic</p>
  <p class="subject-list">
    <label for="Maths">
      <input type="checkbox" class="Maths" name="Maths">Maths
    </label>
  </p>
  <p class="subject-list">
    <label for="English">
      <input type="checkbox" class="English" name="English">English
    </label>
  </p>
  <p class="subject-list">
    <label for="Science">
      <input type="checkbox" class="Science" name="Science">Science
    </label>
  </p>
  <p class="subject-list">
    <label for="computer-science">
      <input type="checkbox" class="computer-science" name="computer-science">Computer science
    </label>
  </p>
  <p class="category">Sports</p>
  <p class="subject-list">
    <label for="Tennis">
      <input type="checkbox" class="Tennis" name="Tennis">Tennis
    </label>
  </p>
  <p class="subject-list">
    <label for="cricket">
      <input type="checkbox" class="cricket" name="cricket">cricket
    </label>
  </p>
</div>
<div class="group2" style="float: right; border: 1px solid red; width: 200px;">
  <p class="category">Academic</p>
  <p class="subject-list">
    <label for="Maths">
      <div class="Maths" style="padding-left: 10px;">Maths</div>
    </label>
  </p>
  <p class="subject-list">
    <label for="English">
      <div class="English" style="padding-left: 10px;">English</div>
    </label>
  </p>
  <p class="subject-list">
    <label for="Science">
      <div class="Science" style="padding-left: 10px;">Science</div>
    </label>
  </p>
  <p class="subject-list">
    <label for="computer-science">
      <div class="computer-science" style="padding-left: 10px;">Computer science</div>
    </label>
  </p>
  <p class="category">Sports</p>
  <p class="subject-list">
    <label for="Tennis">
      <div class="Tennis" style="padding-left: 10px;">Tennis</div>
    </label>
  </p>
  <p class="subject-list">
    <label for="cricket">
      <div class="cricket" style="padding-left: 10px;">cricket</div>
    </label>
  </p>
</div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题