隐藏数据id加载和显示点击按钮

Hide data-id on load and Show On Click of A Button

本文关键字：按钮 显示 数据 id 加载 隐藏      更新时间：2023-09-26

我目前在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">

希望有一些帮助。非常感谢。

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

这是未经测试的，但将根据数据属性

匹配数据类型。

编辑:改为从按钮获取类

希望你从中得到一些启示:

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

引用:jQuery

相关文章：