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

使用基于子元素的alt标记的JS / JQuery隐藏父元素

3 个答案: