显示/隐藏内容根据其数据 - *使用jQuery属性

Question

我创建在WordPress网站和我使用的工具集插件（自定义字段＆文章类型）来创建一个我的项目页面上显示的项目。所有我创建的所有项目都分配有一个类别（例如，完整的项目，正在实施的项目），那么我有显示所有类别，如“所有项目”菜单中的对象，在一排“完成项目”。

我希望能够以显示我已经按照你点击该菜单对象/名称创建的项目，因此，所有的已完成的项目要当用户点击前出现。 “已完成项目”，持续的项目a.s.o.

这个就是被动态地分配给它（所以当我创建一个项目，并增加了一个类别，它被添加到吧）div的data-category：

<div class="project_wrapper" data-category="[wpv-post-taxonomy type='category' format='slug']"> <!-- The project code --> </div>

然后，这是用户可以点击菜单对象的列表：

<div class="project_menu">
 <ul>
  <li id="all" class="objects">All Projects</li>
  <li id="complete" class="objects">Completed Projects</li>
 </ul>
</div>

这是那么应该.hide或.show的corespondig项目根据jQuery的，如果传递trought它data-type。

jQuery(document).ready(function($){

 // Show all projects
 $("#all").click(function(){
  $('.project_wrapper[data-category=show-all]').show();
 });

 // Complete projects
 $("#complete").click(function(){
   $('project_wrapper[data-category=complete]').show();
 });

});

这不是做什么工作的。如果我有project-wrapper集的父显示.show和/或.hide它工作得很好，但是当我通过了jQuery通过data-*它不会改变任何东西。我是相当新的JavaScript和jQuery的很抱歉，如果这是一个烂摊子。谢谢！

Answer 1

这应该为你工作，如果我理解你的问题：

jQuery(document).ready(function($){

 // Show all projects
 $("#all").click(function(){
  $(".project_wrapper").show();
 });

 // Complete projects
 $("#complete").click(function(){
  $(".project_wrapper").hide();
  $(".project_wrapper[data-category*='completed']").show();
 });

});

你失踪在完整功能的点，我想你也需要只显示那些完成之前隐藏的所有类。

这里有一个jsfiddle，你可以用试试。

Answer 2

也许加引号是要修复它。

jQuery(document).ready(function($){
    // Show all projects
    $("#all").click(function(){
        $('.project_wrapper[data-category="show-all"]').show();
    });

    // Complete projects
    $("#complete").click(function(){
        $('.project_wrapper[data-category="complete"]').show();
    });
});

是元素隐藏下手？如果是的话怎么样？

.show（）是大致相当于调用的CSS（“显示”，“块”）

但

如果使用您的风格，如显示重要：！无重要，.show（）将不会覆盖重要！

因此，这将是有用的了解CSS是什么样的函数被调用之前。