Question

我目前有一个带有过滤功能的图片库（Jquery Quicksand），它位于Wordpress中。图库中的每个图片都拥有data-id（例如data-id="id-148"）。

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

让我们说onLoad网站，data ids: 148, 149, 150的图片将被隐藏，然后onClick隐藏一个具有特定类class="show"的按钮，然后数据ID {{1} }} 将会呈现。当我点击148, 149, 150时，上面提到的class="All"将再次隐藏。

图像位于列表项中：

data-ids

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

Answer 1

我刚做了一些虚拟元素。检查一下，

HTML

<ul id="quick-sand">
    <li class="one-third column" data-id="id-148" data-type="a">a</li>
    <li class="one-third column" data-id="id-149" data-type="b">b</li>
    <li class="one-third column" data-id="id-150" data-type="c">c</li>
    <li class="one-third column" data-id="id-151" data-type="d">d</li>
    <li class="one-third column" data-id="id-152" data-type="e">e</li>
    <li class="one-third column" data-id="id-153" data-type="f">f</li>
</ul>
<button class="showli">Show/Hide</button>

JS

var toHide = ['id-148', 'id-152'];
    $('#quick-sand li').each(function () {
        if ($.inArray($(this).attr('data-id'), toHide) >= 0) {
        $(this).hide();
    }
});

$('.showli').on('click', function () {
    $('#quick-sand li').each(function () {
        if ($.inArray($(this).attr('data-id'), toHide) >= 0) {
            $(this).toggle();
        }
    });
});

检查Fiddle！

This may help you to fix the cause.

在加载时隐藏多个图像数据ID并在单击按钮时显示它们

1 个答案: