使用基于子元素的alt标签的JS / JQuery隐藏父元素 [英] Hiding a parent element using JS/JQuery based on the alt tag of a child element

问题描述

我的投资组合网站有一个WordPress后端，我使用一个Wordpress图库生成我的各种项目的链接。然而，现在它变得有点笨重，我想让访问者能够根据类别过滤选项的数量。如设计，平面设计等。

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

 < dl class ='gallery-item'> 
< dt class ='gallery-icon landscape'> 
 < / dt> 
< dd class ='wp-caption-text gallery-caption'> 
 Page 
的描述< / dd> 
< / dl> 
  

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

这是可以做的事情？我已经看过，并尝试了几件事，但到目前为止我还没有接近。

操纵 img 标签并给它们一个 data 属性，您仍然可以依靠 alt

$ b 为了说明，我正在考虑下面的标记：

 < select id =mySelect> 
< option value =>请选择...< / option> 
< option value =Design> Design< / option> 
< option value =平面设计>平面设计< / option> 
< / select> 
< br /> 
< dl class ='gallery-item'> < dt class ='gallery-icon landscape'> 
 < / dt> 
 
< dd class ='wp-caption-text gallery-caption'>页面描述< / dd> 
< / dl> 
 
< dl class ='gallery-item'> < dt class ='gallery-icon landscape'> 
 < / dt> 
 
< dd class ='wp-caption-text gallery-caption'>页面描述< / dd> 
< / dl> 
  

使用jQuery：

 $（function（）{
）//当用户选择要显示的图库项目时，$（'＃mySelect'）。on（'change'，function（） {
 //我们隐藏所有的元素
 $（'。gallery-item'）。hide（）; 
 
 //如果实际上有东西被选中，
 if（$（this）.val（））{
 //选择图像，其中alt是选定的值，
 //并显示其父级图库项目
 $（'[alt =''+ $（this）.val（）+']'）。parents（'。gallery-item'）。show（）; 
} 
}）; 
}）; 
  

Demo

只是为了补充，反过来说：

 （$'$ my $'）。（$'$'$'$'$'$'$'$'$'$' 
 //我们显示所有这些元素
 $（'。gallery-item'）。show（）; 
 
 //如果实际上有选择的东西。
 if（$（this）.val（））{
 //选择图像，其中alt是所选值，
 //并隐藏它的父级，该图标是图库项目
 $ （'[alt =''+ $（this）.val（）+']'）。parents（'。gallery-item'）。hide（）; 
} 
}）; 
}）; 
  

演示

My portfolio website has a Wordpress backend, and I use a Wordpress gallery to produce links to my various projects. It is getting somewhat bulky now, however, and I would like to give visitors the ability to filter the number of options based on categories. Such as "Design", "Graphic Design", etc.

Each element in the gallery uses the following code:

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

I can control the text of the alt tag when the img is declared. What I'm looking for is to design a link that calls a JavaScript function that would hide the parent element if the child img element has a specific alt tag.

Is this something that can be done? I've looked and been trying several things but so far I haven't even come close.

解决方案

Assuming you can't manipulate the img tags and give them a data attribute, you can still rely on the alt attribute to achieve that.

Just to illustrate, I'm considering the markup below:

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

And using 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

Just to complement, the other way round:

$(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隐藏父元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！