- Java 双重比较
- java - 比较器与 Apache BeanComparator
- Objective-C 完成 block 导致额外的方法调用?
- database - RESTful URI 是否应该公开数据库主键?
html:
<ul id="selector">
<li><a href="#" class="group1" rel="group1">group 1</a></li>
<li><a href="#" class="group2" rel="group2">group 2</a></li>
<li><a href="#" class="group3" rel="group3">group 3</a></li>
</ul>
<ul id="elements">
<li class="group1">1</li>
<li class="group1 group2">1 and 2</li>
<li class="group3">3</li>
<li class="group1 group3">1 and 3</li>
<li class="group2 group3">2 and 3</li>
<li class="group2">2</li>
</ul>
jQuery:
$('#selector a').click(function(event){
event.preventDefault();
var $this = $(this),
target = $this.attr('rel');
$('#selector a').removeClass('active');
$this.addClass('active');
$('#elements li').addClass('inactive');
$('#elements li.'+target).removeClass('inactive').addClass('active');
});
CSS:
#selector {margin: 10px 0; background: #eee; list-style: none; padding: 0px;}
#selector li {display: inline-block;}
#selector li a {display: block; margin: 0 4px; padding: 5px; background: #aaa;}
#selector li a.active {color: #fff;}
#elements {margin: 0px; padding: 0px; list-style: none; background: #eee;}
#elements li {display: inline-block; width: 100px; margin: 4px; text-align: center; background: #ccc; padding: 40px 0;}
#elements li.inactive {opacity: 0.2}
这段简单的代码显示了一个小界面,允许用户单击组选择器元素并突出显示属于该组的所有元素。单击其他组按钮时,选择会发生变化。从这一点出发,我想做的是能够使多个组选择器“处于事件状态”,同时突出显示属于所单击的两个、三个或更多选择器元素的所有元素。
换句话说 - 有人点击 group1 选择器 - 具有该类的元素被突出显示。比有人点击 group2 - 只有属于这两个组的元素被突出显示。当有人“取消点击”group1 选择器时,只有具有 class2 的元素会突出显示等。当没有任何组选择器被单击时 - 所有元素都具有 100% 的不透明度。
谁能告诉我从哪里开始以及我应该如何从上面的代码开始?
http://jsfiddle.net/Cyberek/MeG6S/了解它现在是如何工作的示例。
最佳答案
这是一种方法,将所有内容包装在一个容器中并向其中添加类,使用它来设置相关项的样式。我们可以简单地切换被点击的类,而不是所有这些类操作。
JS
$('#selector a').click(function(event){
event.preventDefault();
var group = this.className;
$('#container').toggleClass(group);
});
CSS
#container #elements li {opacity: 0.2}
#container.group1 #elements .group1,
#container.group2 #elements .group2,
#container.group3 #elements .group3 {opacity:1;}
#container.group1 #selector .group1,
#container.group2 #selector .group2,
#container.group3 #selector .group3{border:1px solid #000;}
如果您只想在 1 和 2 都处于事件状态时激活“1 和 2”,那么您可以像这样扩展它以覆盖所有碱基。如果您有 5 个以上的组,JavaScript 替代方案可能会更好。
#container.group1 #elements .group1:not(.group2):not(.group3),
#container.group2 #elements .group2:not(.group1):not(.group3),
#container.group3 #elements .group3:not(.group1):not(.group2),
#container.group1.group2:not(.group3) #elements .group1.group2:not(.group3),
#container.group2.group3:not(.group1) #elements .group2.group3:not(.group1),
#container.group3.group1:not(.group2) #elements .group3.group1:not(.group2),
#container.group1.group2.group3 #elements .group1,
#container.group1.group2.group3 #elements .group2,
#container.group1.group2.group3 #elements .group3,
#container:not(.group1):not(.group2):not(.group3) #elements li {opacity:1;}
关于javascript - jQuery 和多个 "category"选择器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15677636/
我正在尝试根据 magento 中的产品 ID 在类别路径中获取类别名称。 假设我的产品 ID = 1,并且我在其中定义了 category5 (id = 5),并且我得到了类似 2/3/5 的类别路
我试图弄清楚如何通过 AngularJS 中的 $http.get() 方法发送数组。这就是我正在做的事情: $http.get('/events.json', {params: {category_
我在产品类别和子类别网站上工作,可以创建的子类别数量是无限的,这意味着我们可以自己拥有子类别的子类别。一切正常,我只是有一个问题:假设“PRODUCT 1”属于“SUB SUB CATEGORY 1”
在 stackoverflow 上所有这些 mod 重写主题之后,我仍然没有找到我的问题的答案。我有一个顶级站点,基本上我想做的就是将 /index.php?method=in&cat=Half+Li
我正在为我的未婚夫构建一个 Rails 应用程序来进行一些非常基本的库存跟踪。我们已经经历了几种选择,因为无论如何我都想学习 Rails,所以我们想出了为什么不。无论如何,如果我可以将一些产品按这样分
我需要在 Prestashop 主题的类别页面中列出同级类别。目前它确实显示子类别(如果有)但不兄弟类别。 如果能快速回答,我们将不胜感激!谢谢。 最佳答案 首先我会在/override/contro
关闭。这个问题需要details or clarity .它目前不接受答案。 想改进这个问题吗? 通过 editing this post 添加细节并澄清问题. 关闭 7 年前。 Improve
我正在使用以下维基媒体 API 列出具有特定类别的所有页面:https://www.mediawiki.org/wiki/API:Categorymembers 例如https://en.wikipe
我应该如何命名用户类别和文章类别的表和模型?我有两个表,一个是用户,另一个是文章。我想对它们进行分类,以便我可以仅调用新闻文章或仅使用公司类别中的用户。所以我需要这些模型/表之间的关系。 我考虑过为文
在 UI Router 中实现此类功能的最佳方法是什么? /category/product /category/category/product 例如: /telephones/apple/ipho
我有以下 SQL 架构: tbl_产品: - ID - id_category tbl_categories: - ID - id_parent tbl_products_categories:- i
我需要创建一个对用户隐藏的应用程序。但在它被隐藏之前,我需要在 GUI 上设置一些配置,然后我必须从应用程序列表中隐藏图标。如果我删除 应用程序未显示在应用程序列表中。但是我的配置 GUI 也没有显
我正在尝试派生一个 MySQL 查询来转换这个: product | sold milk | 6 milk | 4 bread | 3 bread | 2 bread
我正在使用 ^category/|categories/$。 为什么 ^categor[y|ies]/$ 不起作用? 最佳答案 你的正则表达式应该是, ^categor(?:y|ies)/$ 使用非捕
据我所知,有两种情况会导致以下错误: ld: warning: instance method 'resetAudioSystem' in category from /opentok-ios-sdk
我希望我的问题很清楚,但我会尝试再解释一下。 在我的数据库中,我有两列名为“category”和“images”。在我的表单中,人们需要添加一个类别,以便我的 PHP 向 MySQL 添加一个新条目。
我在 pandas 中有以下 df 数据框: weekday venta_total_cy 0 Viernes 5.430211e+09 1 Lunes 3.4255
我目前陷入困境。场景是这样的。我有可能与多个类别相关联的产品。数据结构如下图: Products Table: product_id name 1 Lemon 2
我使用 openActivity()使用 Kotlin 在 Android Studio 3.1.2 中创建首选项 UI。 看来代码A和代码B都可以正常工作。 android.intent.categ
我有一个 Postgres 数据库。我正在尝试根据表 2 中表达的条件删除表 1 中的行。 表 1:id, object_id, time, action_type 表 2:object_id, ob
我是一名优秀的程序员,十分优秀!