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

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

我希望能够显示我根据您单击的菜单对象/名称创建的项目，因此当用户单击ex.completed projects（已完成项目）、Continuous projects a.s.o.时，应显示所有已完成的项目

这是动态分配给它的数据类别的div，因此当我创建一个项目并向其中添加一个类别时，它会被添加到其中：

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

---

这目前不起作用。如果我将项目包装器的父级设置为display.show和/或.hide，它就可以正常工作，但是当我通过jQuery传递数据-*时，它不会改变任何东西。我对JavaScript和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();
    });
});

元素一开始是隐藏的吗？如果是，怎么做

.show大致相当于调用.css display，block

但是

如果使用！在您的样式中很重要，例如显示：无！重要提示，.show将不会覆盖！重要的

---

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

如果我理解了你的问题，这应该对你有用：

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

});

您的完整函数中缺少了一个点，我想您还需要在仅显示已完成的类之前隐藏所有类

---

这里有一个你可以试试的。

谢谢，我忘了。。但是它仍然不起作用。是的，我在这个和其他线程的帮助下做到了。抱歉，我忘了回答。如果要显示所有数据类别为的项目，请使用$[data category]-否则我看不到data category=complete与数据类别的关系=[wpv post taxonomy type='category'format='slug']

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

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

});