Question

我正在WordPress中创建一个网站，并且正在使用Toolset插件（自定义字段和帖子类型）来创建要在项目页面上显示的项目。我创建的所有项目都为其分配了一个类别（例如完整项目，正在进行的项目），然后我的菜单对象显示了所有类别，例如“ All项目”，“已完成的项目” 。

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

然后这是jQuery，应该.hide或.show进行corespondig项目，具体取决于传递的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[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，您可以尝试使用。

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

2 个答案: