加载时隐藏 data-id 并在单击按钮时显示答案

【问题标题】：Hide data-id on load and Show On Click of A Button加载时隐藏 data-id 并在单击按钮时显示
【发布时间】：2014-07-22 17:13:29
【问题描述】：

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

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

【问题讨论】：

“数据ID；148、149、150将被隐藏”是什么意思？它们没有显示，它们只是存储在某些元素中的一些数据！
请发布一些实际代码，每个data-id 都有data-attribute
嗨，阿敏。感谢您指出我的解释错误。我有拥有这些数据 ID 的图像。假设“图像 1 的数据 ID 为 148”，那么“图像 2 的数据 ID 为 149”。当网站加载那些具有上述数据 ID 的图像时，这些图像将被隐藏。
对不起，伙计们。我的按钮出错了。这些按钮没有数据属性，而是一个 css 类。
你能创建一个你的布局的小提琴吗？

标签： javascript jquery onclick onload quicksand

【解决方案1】：

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

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

编辑：改为从按钮上课

【讨论】：

谢谢唐纳德。他的按钮有一个错误。该按钮没有数据属性，只有一个 css 类。我再次道歉并再次感谢。
@Niccolo 编辑现在从按钮中获取类并将其放入att
再次感谢唐纳德。但是代码不起作用..页面加载时是否可能隐藏了特定的数据ID（148、149、150）？然后它在单击具有“Apples”类的按钮时显示，然后在单击具有“All”类的按钮时隐藏。谢谢谢谢。

【解决方案2】：

希望你能从中得到一些启示：

$(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

【讨论】：

嗨凯尔。谢谢你。当我重新检查网站时，我的按钮出现错误。该按钮没有数据属性，只有一个 css 类..