根据内部元素过滤掉整个div

Question

我很难把所有的东西都简单地写在这里。 假设所有的类都已经在 css 中设置了样式。

我有几个类似这样的类的 div：-

<div id="s1" class="perschoolcontainer">
	<a href="abc.jpg" >
		<img id="dp1" class="dp" src="abc.jpg">
	</a>
	<p>Cricket</p>
</div>
<div id="s2" class="perschoolcontainer">
	<a href="def.jpg" >
		<img id="dp2" class="dp" src="def.jpg">
	</a>
	<p>Tennis</p>
</div>
<div id="s3" class="perschoolcontainer">
	<a href="ghi.jpg" >
		<img id="dp3" class="dp" src="ghi.jpg">
	</a>
	<p>Tennis</p>
</div>

他们是父母 div 和 id=show 的孩子

<div id="show">
  <div id="s1" class="perschoolcontainer">
	<a href="abc.jpg" >
		<img id="dp1" class="dp" src="abc.jpg">
	</a>
	<p>Cricket</p>
  </div>
  <div id="s2" class="perschoolcontainer">
	<a href="def.jpg" >
		<img id="dp2" class="dp" src="def.jpg">
	</a>
	<p>Tennis</p>
  </div>
  <div id="s3" class="perschoolcontainer">
	<a href="ghi.jpg" >
		<img id="dp3" class="dp" src="ghi.jpg">
	</a>
	<p>Tennis</p>
  </div>
</div>

我想在p 中隐藏那些没有网球的表演儿童。 这从选择菜单开始。

<ul class="list">
  <li>
	<label>
      <input type="checkbox" value="Tennis" class="check">Tennis
    </label>
  </li>
  
  <li>
	<label>
      <input type="checkbox" value="Cricket" class="check">Cricket
    </label>
  </li>
</ul>

现在，无论我从这两个选项中选择哪个选项，都应该删除不存在该选定选项的 .perschoolcontainer div。

$(document).ready(function(){
  if($('input.check').is(':checked')){
	var value = $.trim($(this).val());
	if(value !=   $trim($("#show").children(".perschoolcontainer").children("p").text())){
		$(this).parents("div").css("display","none");
	}
  }
});

这里的 jquery 函数有什么问题。 它基本上应该收集选择的值。然后遍历#show，如果文本不等于该值，则该元素的父div应该被隐藏。

提前谢谢:)

Answer 1

您需要调整选择器并使用事件而不是仅使用 if 语句。

您还需要使用jQuery 的.each() 函数，因为有多个元素，您希望循环遍历它们，然后检查其中的文本。您可以使用简单的选择器轻松挂钩 <p> 标签，而不必执行 .children()... 等操作。

$(document).on('change', 'input.check', function(){
    var $input = $(this);
    var checkboxValue = $input.val();

    $('#show .perschoolcontainer > p').each(function(){
        if($(this).text() == checkboxValue && $input.is(':checked')) {
            $(this).parent().hide();
        }
        else if($(this).text() == checkboxValue && !$input.is(':checked')) {
            $(this).parent().show();
        }
    }
});

Answer 2

看起来您正在检查是否在开始时检查了其中一个输入，而您真正想要的是在检查输入时隐藏 div。

$(function() {

  $(document).on('change', '.check', function() {
    var checkVal = $('.check:checked').val();
    $('#show .perschoolcontainer p').each(function() {
      if ($(this).text() == checkVal) {
        $(this).closest('.perschoolcontainer').hide();
      } else {
        $(this).closest('.perschoolcontainer').show();
      }
    });
  });
  
  
});

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


<div id="show">
  <div id="s1" class="perschoolcontainer">
	<a href="abc.jpg" >
		<img id="dp1" class="dp" src="abc.jpg">
	</a>
	<p>Cricket</p>
  </div>
  <div id="s2" class="perschoolcontainer">
	<a href="def.jpg" >
		<img id="dp2" class="dp" src="def.jpg">
	</a>
	<p>Tennis</p>
  </div>
  <div id="s3" class="perschoolcontainer">
	<a href="ghi.jpg" >
		<img id="dp3" class="dp" src="ghi.jpg">
	</a>
	<p>Tennis</p>
  </div>
</div>

<ul class="list">
  <li>
	<label>
      <input type="checkbox" value="Tennis" class="check">Tennis
    </label>
  </li>
  
  <li>
	<label>
      <input type="checkbox" value="Cricket" class="check">Cricket
    </label>
  </li>
</ul>

Answer 3

完整的解决方案，我还添加了检查复选框更改。

$(document).ready(function(){

  var inputs=$("input[type='checkbox']");
  var divs=$("div.perschoolcontainer");

  //function checks checkboxes and show only does divs with text containng with value from checkbox
  function checkInputs(){

    //hide all
    divs.hide();


    for (var i=0; i<inputs.length; i++){

      if (inputs.eq(i).prop("checked")){
         //checkbox is checked
         var value = $.trim(inputs.eq(i).val());
         //show does with p and text in it
         divs.find("p:contains('"+value+"')").parent().show();
      }

    }

   }

 //after web starts check checkboxes
 checkInputs();


 inputs.on("change",function(){
     //on checkbox change
     checkInputs();
 });

});

工作代码 - https://plnkr.co/edit/h5IU1J7ErfYKrsAERSE7?p=preview