首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >通过data=属性过滤元素

通过data=属性过滤元素
EN

Stack Overflow用户
提问于 2011-12-09 17:53:01
回答 1查看 1.7K关注 0票数 2

在我的情况下,我需要通过元素和各种手段进行过滤,几乎是有效的。

有一个用户可以选择的颜色列表。可以选择多个颜色。每个元素可以有一个或多个这些属性分配给它。

属性示例:

代码语言:javascript
代码运行次数:0
运行
复制
<div data-wotc-color="G">
<div data-wotc-color="B">
<div data-wotc-color="U">
<div data-wotc-color="UB">
<div data-wotc-color="U">
<div data-wotc-color="W">

In JQuery我这样做是为了通过使用filter():来显示/隐藏

代码语言:javascript
代码运行次数:0
运行
复制
$.each($('.colorpicker a'), function() {
    if ($(this).hasClass('selected')) {
            $('.pac').filter('[data-wotc-color*="' + $(this).attr('id') + '"]').show();
        } else {
            $('.pac').filter('[data-wotc-color*="' + $(this).attr('id') + '"]').hide();
        }
    });

基本上,所发生的事情(据我所见)是当您选择一个元素时,它可以显示/隐藏元素。当选择多个时,只要您按正确的顺序选择它,它就会正确地显示/隐藏。我知道这里可能需要某种正则表达式,但我不完全确定如何使用JQuery实现它。

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2011-12-09 17:58:51

问题是,对于,每个锚点都是隐藏的,这些元素可能已经(合法地)显示了。

相反,隐藏所有内容,然后显示所选颜色的内容:

代码语言:javascript
代码运行次数:0
运行
复制
// Hide EVERYTHING
$('.pac').hide();

// Now show everything that matches:
$('.colorpicker a.selected').each(function() {
    $('.pac').filter('[data-wotc-color*="' + $(this).attr('id') + '"]').show();
});
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/8449656

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档