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。

Thnx提前：）

Answer 1

看起来你正在检查其中一个输入是否在开始时检查 当你真正想要的是在检查输入时隐藏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 2

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

您还需要使用jQuery的{{1}}函数，因为有多个元素，您想循环遍历它们，然后检查其中的文本。您可以使用简单的选择器轻松加入.each()标记，而不必使用<p>等等。

.children()

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

在内部元素的基础上过滤掉整个div

3 个答案: