Question

我目前在Wordpress中有一个具有过滤功能的图库。图库中的每个图片都拥有data-id（例如data-id="id-148"）。

我想询问有关如何在jQuery上进行编码的帮助。我希望在网站加载时删除（或隐藏）多组data-ids，然后点击具有特定类的某些按钮（href），这些data-ids将会然后被展示。

让我们说onLoad data ids: 148, 149, 150的图片将被隐藏，然后onClick隐藏一个具有特定班级class="Apples"的按钮，然后会显示148。如果我点击class="Orange"按钮，则会显示data-id 149。当我点击class="All"时，上面提到的data-ids将再次隐藏。

图像位于列表项中：

<li class="one-third column" data-id="id-148" data-type="Apples">

希望得到一些帮助。非常感谢你。

Answer 1

希望你从中获得一些启示：

$(document).ready(function(){
   $("some_button").click(function(){
     // Get data-* value using data();
     var dataAttribute = $(this).data("attribute");
       if(dataAttribute == "Apples")
         $("li[data-id='148']").show();
   });
});

参考文献：

Find an element with a specific data attribute jQuery

Answer 2

$(document).ready(function(){
   $('body').on('click','.mybutton', function(){
     var att = $(this).class();
     $("li[data-type ="+att+"]").hide();
   });
});

这是未经测试的，但会将数据类型与数据属性

匹配

编辑：已更改为从按钮

获取课程

在加载时隐藏数据ID并在按钮上单击显示

2 个答案: