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

Question

我正在 WordPress 中创建一个网站，并使用工具集插件(自定义字段和帖子类型)来创建在项目页面上显示的项目。我创建的所有项目都分配有一个类别(例如完整项目、正在进行的项目)，然后我有菜单对象显示所有类别，例如“所有连续的“项目”、“已完成的项目”。

我希望能够根据您单击的菜单对象/名称显示我创建的项目，因此当用户单击 ex 时，应显示所有已完成的项目。 “已完成的项目”，正在进行的项目 a.s.o.

这是动态分配给它的data-category的div(所以当我创建一个项目并向其中添加一个类别时，它会被添加到其中) ):

<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核心项目的jQuery，具体取决于传递的数据类型 .

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[data-category="show-all"]').show();
    });

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

元素一开始就被隐藏了吗？如果是的话怎么办？

.show() is roughly equivalent to calling .css( "display", "block" )

但是

If using !important in your styles, such as display: none !important, .show() will not override !important

因此，在调用函数之前了解 CSS 是什么样子会很有用。