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

我很难把这里的一切简单地说出来。 假设所有的类都已经用css设置了样式

我有几个同级别的div，如下所示：-

板球

网球

网球

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

$（函数（）{
$（document）.on（'change'，'check'，function（）{
var checkVal=$（'.check:checked'）.val（）；
$（'#show.perschoolcontainer p'）。每个（函数（）{
if（$（this）.text（）==checkVal）{
$（this）.closest（'.perschoolcontainer'）.hide（）；
}否则{
$（this）.closest（'.perschoolcontainer'）.show（）；
}
});
});
});

板球

网球

网球



网球


板球

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


$（函数（）{
$（document）.on（'change'，'check'，function（）{
var checkVal=$（'.check:checked'）.val（）；
$（'#show.perschoolcontainer p'）。每个（函数（）{
if（$（this）.text（）==checkVal）{
$（this）.closest（'.perschoolcontainer'）.hide（）；
}否则{
$（this）.closest（'.perschoolcontainer'）.show（）；
}
});
});
});

板球

网球

网球



网球


板球

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

您还需要利用
jQuery
的
.each（）
函数，因为有多个元素，您需要循环遍历它们，然后检查其中的文本。您可以使用简单的选择器轻松地挂接到
标记，而不必执行
.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();
        }
    }
});

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

您还需要利用
jQuery
的
.each（）
函数，因为有多个元素，您需要循环遍历它们，然后检查其中的文本。您可以使用简单的选择器轻松地挂接到
标记，而不必执行
.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();
        }
    }
});

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

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

});

$（文档）.ready（函数（）{
变量输入=$（“输入[type='checkbox']”）；
var divs=$（“div.perschoolcontainer”）；
//函数选中复选框并仅显示文本包含值来自复选框的div
函数checkInputs（）{
//全部隐藏
divs.hide（）；
对于（var i=0；i完整解决方案，我还添加了复选框更改

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

});

$（文档）.ready（函数（）{
变量输入=$（“输入[type='checkbox']”）；
var divs=$（“div.perschoolcontainer”）；
//函数选中复选框并仅显示文本包含值来自复选框的div
函数checkInputs（）{
//全部隐藏
divs.hide（）；
对于（var i=0；i1.如果你想问一个复杂的问题，用一种最简单的方法来重现它。JSFIDLE是很常见的。2.描述错误。3.首先尝试调试它，然后询问是否卡住。4.该函数在页面加载时启动，因此如果你之后与页面交互，它将不会运行-这是你的问题吗？@Vld我已经把我的问题解决到了这个程度。我还没有使用JSFIDLE。但我肯定从下一次开始我会使用它。1.如果你想问一个复杂的问题，用一种最简单的方法来重现它。JSFIDLE是很常见的。2.描述一下什么是错误的。3.首先尝试调试它，然后询问你是否卡住了。4.该函数已启动ce在页面加载时，因此如果您之后与页面交互，它将不会运行-这是您的问题吗？@Vld我已经将我的问题调整到了这个程度。我还没有使用JSFIDLE。但肯定从下一次开始我会使用它。这正是我需要的。非常感谢，先生。这是错误的答案，如果选中这两个复选框，那么它将没有任何价值$（'.check:checked'）.val（）正是我需要的。非常感谢，先生。这是一个错误的答案。如果两个复选框都被选中，那么$（'.check:checked'）.val（）@SudhanshuSaini记住你选择的答案，他们的选择器
$（'#show.perschoolcontainer p'））
将选择
.perschoolcontainer
中的所有子元素
p
，如果dom树下还有其他子元素，这可能会给您带来一些问题。您应该将选择器的特殊性增加到
>p
，以便它只获得直接子元素。我刚刚意识到……实际的代码包含alo这个解决方案非常糟糕，使用硬编码字符串，只适用于网球，不适用于网球Cricket@Adjit这是在教授错误的实践，答案很快，但解决方案很弱。@MaciejSikora观点问题。你的答案比我的更错误。它使用了
jQuery的愚蠢组合
和vanilla JS，您可以在两者之间交替。这对可读性或可移植性没有帮助。我已经更新了我的答案，以使用复选框的值来检查文本，因此任何带有值的复选框都将满足OP的要求。@SudhanshuSaini请记住您选择的答案，即他们的选择器
$（“#show.perschoolcontainer p”）
将选择
.perschoolcontainer
中的所有子
p
元素，如果dom树下还有其他子元素，这可能会导致一些问题。您应该将选择器的特殊性增加到
>p
，以便