根据子元素的alt标记使用JS/JQuery隐藏父元素

Question

我的作品集网站有一个Wordpress后端，我使用Wordpress图库来生成到我的各种项目的链接。然而，现在它变得有些笨重了，我想让访问者能够根据类别过滤选项的数量。例如“设计”、“图形设计”等。

库中的每个元素都使用以下代码：

<dl class='gallery-item'>
    <dt class='gallery-icon landscape'>
        <a href="Page Link" target="_self" class="no-lightbox"><img width="250" height="250" src="Display Image" class="attachment-full" alt="Design" /></a>
    </dt>
    <dd class='wp-caption-text gallery-caption'>
        Description of Page
    </dd>
</dl>

当声明img时，我可以控制alt标记的文本。我正在寻找的是设计一个链接，它调用一个JavaScript函数，如果子img元素有特定的alt标记，该函数将隐藏父元素。

这是可以做到的吗？我已经寻找并尝试了几个东西，但到目前为止，我甚至还没有接近。

Answer 1

可以，您可以根据子项的属性隐藏父项：

Js (香草)：

//Consider "el" as the <a> clicked element
if(el.children[0].getAttribute("alt") == "Something") {
    el.parentNode.style.display = "none";
}

Jquery：

//Consider "el" as the <a> clicked element
if($(el).find("img").is("[alt='Something']")) {
    $(el).parent().hide();
}

但正如评论所说，您应该为该属性设置另一个属性，而不是alt，因为它有不同的用途……

Answer 2

正如其他人所提到的，您可以将其放在更适合于此类应用程序的数据属性中，但是考虑到您在这里拥有的特定上下文，可以使用以下内容：

$("#hideDesign").click(function() {
        $("[alt='Design']").parent().toggle();
})

其中"#hideDesign“是您希望用户单击以切换特定类型元素的视图的元素的ID。

Answer 3

假设您不能操作img标记并给它们一个data属性，您仍然可以依靠alt属性来实现这一点。

为了说明，我考虑下面的标记：

<select id="mySelect">
    <option value="">Please select...</option>
    <option value="Design">Design</option>
    <option value="Graphic Design">Graphic Design</option>
</select>
<br />
<dl class='gallery-item'> <dt class='gallery-icon landscape'>
        <a href="Page Link" target="_self" class="no-lightbox"><img width="250" height="250" src="Display Image" class="attachment-full" alt="Design" /></a>
    </dt>

    <dd class='wp-caption-text gallery-caption'>Description of Page</dd>
</dl>

<dl class='gallery-item'> <dt class='gallery-icon landscape'>
        <a href="Page Link" target="_self" class="no-lightbox"><img width="250" height="250" src="Display Image" class="attachment-full" alt="Graphic Design" /></a>
    </dt>

    <dd class='wp-caption-text gallery-caption'>Description of Page</dd>
</dl>

并使用jQuery：

$(function () {
    // When the user selects a gallery item to display.
    $('#mySelect').on('change', function () {
        // We hide all of them.
        $('.gallery-item').hide();

        // If there's actually something selected.
        if ($(this).val()) {
            // Select the image which alt is the value selected, 
            // and show its parent which class is gallery-item.
            $('[alt="' + $(this).val() + '"]').parents('.gallery-item').show();
        }
    });
});

Demo

作为补充，反过来：

$(function () {
    // When the user selects a gallery item to hide.
    $('#mySelect').on('change', function () {
        // We show all of them.
        $('.gallery-item').show();

        // If there's actually something selected.
        if ($(this).val()) {
            // Select the image which alt is the value selected, 
            // and hide its parent which class is gallery-item.
            $('[alt="' + $(this).val() + '"]').parents('.gallery-item').hide();
        }
    });
});

Demo