隐藏要素按类别与jquery

我有这样的模拟代码：隐藏要素按类别与jquery

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <meta charset="utf-8"/> 
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> 
     <meta name="viewport" content="width=device-width; initial-scale=1.0"/> 
     <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> 
     <script type="text/javascript"> 
      $(document).ready(function(){ 
       $("input[name=type_selector]").change(function(){ 
        var $category = $(this); 
        $("div[class=widget_group_div]").each(function(){ 
         if ($category.parent().text() == $(this).children("p").text()) 
         { 
          if ($category.prop('checked')) 
          { 
           $(this).children().show(); 
           $(this).show(); 
          } 
          else 
          { 
           $(this).children().hide(); 
           $(this).hide(); 
          } 
         } 
        }); 
       }); 
      }; 
     </script> 

    </head> 
    <body> 
     <div class="wrapper"> 
      <ul id="classification_selector"> 
       <label><li>widget_a<input type="checkbox" name="type_selector" value="widget_a" checked=""/></li></label> 
       <label><li>widget_b<input type="checkbox" name="type_selector" value="widget_b" checked=""/></li></label>    
      </ul> 
      <div id="y_scroll_div"> 
       <div class="name_div"><h3><label>Item 1231</label></h3></div> 
       <div class="widget_group_div">    
        <label class="widgets_name"> 
         <p class="widget_group_name"> 
          widget_a 
         </p> 
        </label>      
       </div> 
       <div class="name_div"><h3><label>Item 23232</label></h3></div> 
       <div class="widget_group_div">     
        <label class="widgets_name"> 
         <p class="widget_group_name"> 
          widget_b 
         </p> 
        </label>      
       </div> 
      </div>   
     </div> 
    </body> 
</html>

什么是假设发生的是有假设是有name_div类中的每个项目的大名单。然后在下面会有一堆不同的元素，在widget_group_div中有关于该项目的信息，以及一个将该项目归入某个类别下的元素，为了简单起见，我删除了除处理类别之外的所有其他元素。

页面顶部有一个带有可用类别的检查列表，其想法是该页面加载系统中的所有内容。然后，用户可以选择通过从类别列表中删除支票来消除类别。理想情况下，每个widget_group_div上方的name_div也会被隐藏起来，但是现在我甚至无法将widget_group_div或其子项隐藏起来。

我已经包括了我在jQuery的尝试，给你一个我正试着去的方向的想法，谢谢。

来源

2015-03-19 Never Nor

无效的标记标签不能是儿童的ul .....？ – Jai 2015-03-19 06:03:32

第一次很好的尝试，你非常接近，其次，我会建议使用IDE /文本编辑器提供“有效”的HTML，CSS和JavaScript的提示或“intellisense”......这将节省你很多时间和挫折。这里是一个解决方案...

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8" /> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> 
    <meta name="viewport" content="width=device-width; initial-scale=1.0" /> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
      $("input[name=type_selector]").change(function() { 
      var $category = $(this); 
      $("div[class=widget_group_div]").each(function() { 


       if ($category.parent().text() == $(this).children("p").html().trim()) { 

        if ($category.prop('checked')) { 
         $(this).children().show(); 
         $(this).show(); 
        } 
        else { 
         $(this).children().hide(); 
         $(this).hide(); 
        } 
       } 
      }); 
     }); 
    }); 
</script> 

</head> 
<body> 
    <div class="wrapper"> 
     <ul id="classification_selector"> 
      <li>widget_a<input type="checkbox" name="type_selector" value="widget_a" checked="" /></li> 
      <li>widget_b<input type="checkbox" name="type_selector" value="widget_b" checked="" /></li> 
     </ul> 
     <div id="y_scroll_div"> 
      <div class="name_div"><h3>Item 1231</h3></div> 
      <div class="widget_group_div"> 
       <p class="widget_group_name"> 
       widget_a 
       </p> 
      </div> 
      <div class="name_div"><h3>Item 23232</h3></div> 
      <div class="widget_group_div"> 
       <p class="widget_group_name"> 
       widget_b 
       </p> 
      </div> 
     </div> 
    </div> 
</body> 
</html>

来源

2015-03-19 06:13:41 EaziLuizi

谢谢，所以您将.text（）更改为.html（）。trim（）并删除了标签class =“widgets_name”元素。我目前在pydev模式下使用aptana，只是基本上在记事本++中编写html，你能推荐一个免费的html javascript IDE或一个知道aptana的插件吗？再次感谢。 – 2015-03-19 08:11:21

就是这样，你几乎不会使用标签标签，我也从H3标签中删除它。我没有使用Aptana，但显然它非常好，我很幸运能够使用Visual Studio和一些惊人的Nuget软件包。只需谷歌“aptana的intellisense插件”。这应该会让你走上正轨。 – EaziLuizi 2015-03-19 08:20:21

您仍然可以使用.text（）而不是.html（），但是您必须使用修剪（它会修剪掉换行符，空格等） – EaziLuizi 2015-03-19 08:21:59

隐藏要素按类别与jquery

回答

相关问题