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

Question

我正在WordPress中创建一个网站，并且正在使用Toolset插件（自定义字段和帖子类型）创建在项目页面上显示的项目。 我创建的所有项目都有一个分配给它们的类别（例如， Complete projects ， Ongoing projects ），然后我有菜单对象连续显示所有类别，例如“ All Projects”，“ Completed Projects” 。

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

这是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>

然后，这是应该的jQuery的.hide或.show的corespondig项目具体取决于该data-type传递trought它。

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它工作得很好，但是当我通过data-*通过jQuery的它不会改变任何东西。 我对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（）大致等效于调用.css（“ display”，“ block”）

但

如果在样式中使用！important，例如显示：none！important，.show（）将不会覆盖！important

因此，在调用函数之前了解CSS的外观将很有用。

Answer 2

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

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 。