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

我的投资组合网站有一个WordPress后端，我使用一个Wordpress库生成我的各种项目的链接。然而，现在它变得有点笨重，我想让访问者能够根据类别过滤选项的数量。如“设计”，“平面设计”等使用基于子元素的alt标记的JS/JQuery隐藏父元素

在画廊中的每个元素使用下面的代码：

<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标记，它将隐藏父元素。

这是可以做的事吗？我看过并且一直在尝试几件事，但到目前为止我还没有接近。

来源

2014-08-27 tombrgmn

不建议使用'alt'作为“特殊”用途，因为它会影响可访问性... – tcooc 2014-08-27 22:01:45

补充@tcooc评论：为您的元素添加'data'属性来存储这类信息。即：'data-area =“Design”' – melancia 2014-08-27 22:04:36

无论如何......简短回答：'$（'[alt =“Design”]'）。parent（）。hide（）'http://api.jquery.com/parent/ – melancia 2014-08-27 22:06:05

是的，你可以隐藏父，根据孩子的特性：

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以外，因为它有不同的目的...

来源

2014-08-27 22:10:31 LcSalazar

正如其他人所说，你可以把这个数据属性，这将是更适合这样的应用程序，但鉴于你在这里的特定背景下，东西线沿线的：

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

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

来源

2014-08-27 22:11:30

假设您无法操纵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

来源

2014-08-27 22:15:01 melancia

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

回答

相关问题