个人中心
文章发布
退出
作者热门文章
- android - RelativeLayout 背景可绘制重叠内容
- android - 如何链接 cpufeatures lib 以获取 native android 库？
- java - OnItemClickListener 不起作用，但 OnLongItemClickListener 在自定义 ListView 中起作用
- java - Android 文件转字符串
26
4
如果标题没有准确描述我正在尝试做的事情，我深表歉意。至少可以说，我是这一切的新手!为了帮助您理解我要完成的工作，请阅读下面的示例。
我有一个 div 列表，每个 div 都可能有一系列我称之为“标签”的标签。对于此示例，我将使用红色、蓝色和绿色作为可能的标签。每个标签还有一个链接到它的按钮，用户可以单击该按钮来过滤显示的 div。当按钮处于“开启”状态时，它将显示带有该特定标签的 div，但当它处于“关闭”状态时，它将隐藏带有该标签的内容。也就是说，除非内容有另一个当前打开的标签。
红色:开启
蓝色:关闭
绿色:开启
DIV 1:红色
DIV 2:蓝色
DIV 3:绿色
DIV 4:红、蓝
DIV 5:蓝色、绿色
DIV 6:绿色、红色
因为标签 Blue 被关闭，除了 DIV 2 之外的所有 DIV 都会显示。它仍然显示 DIV 4 和 DIV 5 的原因是因为标签 Red 和 Green 仍然打开。如果您同时关闭标签 Red，则只会显示 DIV 3、5 和 6，因为只有 Green 处于打开状态。
我确信有一种更优雅的方式来解释上述内容，但希望它能说明问题。我一直在寻找可以实现此目的的解决方案，但尚未找到。有很多使用搜索框的列表过滤器，但它们不能满足我的需要。
如果有人能指出正确的方向，告诉我可以用什么来完成这个，我将不胜感激!
最佳答案
这是一个关于如何做到这一点的工作示例:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" >
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js"></script>
<script type="text/javascript">
//<!--
$(document).ready(function() {
var buttons = {
'red': $('<input type="button"></input>').val('RED: on'),
'green': $('<input type="button"></input>').val('GREEN: on'),
'blue': $('<input type="button"></input>').val('BLUE: on')
};
var tags = [];
var _updateTaggedElements = function() {
// somewhat optimized if...then...else
if (0 == tags.length) {
$('#taggedElements > .red,.green,.blue').hide();
} else {
$('#taggedElements')
.find('.' + tags.join(',.')).show().end()
.find(':not(.' + tags.join(',.') + ")").hide()
;
}
};
$.each(buttons, function(c,el) {
tags.push(c); // all tagged elements initially visible...
$('#buttons').append(el.click(function() {
var state = /off$/.test(el.val());
var tagIndex = $.inArray(c, tags);
el.val(c.toUpperCase() + ": " + (state ? 'on' : 'off'));
if (state) {
if (-1 == tagIndex) {
tags.push(c);
}
} else if (-1 != tagIndex) {
tags.splice(tagIndex, 1);
}
_updateTaggedElements();
}));
});
});
//-->
</script>
<title>Button selector test</title>
</head>
<body>
<div id="buttons"></div>
<div id="taggedElements">
<div class="red">DIV 1: Red</div>
<div class="blue">DIV 2: Blue</div>
<div class="green">DIV 3: Green</div>
<div class="red blue">DIV 4: Red, Blue</div>
<div class="blue green">DIV 5: Blue, Green</div>
<div class="green red">DIV 6: Green, Red</div>
</div>
</body>
</html>
当然，可以根据您的需要修改它，但如您所见，它实现起来相当容易且很小。使用 tags 数组，您可以拥有任意数量的标签组合。
关于javascript - 如何根据用户选择显示/排序特定的 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/3284800/
26
4
0
在为 Web 应用程序用例图建模时，为用户可以拥有的每个角色创建一个角色是否更好？或拥有一个角色、用户和一个具有特权的矩阵？ guest < 用户 < 版主 < 管理员 1: guest 、用户、版主
我无法使用 Elixir 连接到 Postgres: ** (Mix) The database for PhoenixChat.Repo couldn't be created: FATAL 28P
这个问题已经有答案了: Group by field name in Java (7 个回答) 已关闭 7 年前。 我必须编写一个需要 List 的方法并返回 Map> . User包含 Person
感谢您的帮助，首先我将显示代码: $dotaz = "Select * from customers JOIN contracts where customers.user_id ='".$_SESS
我只想向所有用户中的一个用户显示一个按钮。我尝试了 orderByKey() 但没有成功! 用户模型有 id 成员，我尝试使用 orderByChild("id") 但结果相同! 我什至尝试了以下技巧
我们在工作中从 MongoDB 切换到 Postgres，我正在建立一个 BDR 组。 在这一步，我正在考虑安全性并尽可能锁定。因此，我希望设置一个 replication 用户(角色)并让 BDR
export class UserListComponent implements OnInit{ users; constructor(private userService: UserS
我可以使用 Sonata User Bundle 将 FOS 包集成到 sonata Admin 包中。我的登录功能正常。现在我想添加 FOSUserBundle 中的更改密码等功能到 sonata
在 LinkedIn 中创建新应用程序时，我得到 4 个单独的代码: API key 秘钥 OAuth 用户 token OAuth 用户密码 我在 OAuth 流程中使用前两个。 的目的是什么？最后
所以..我几乎解决了所有问题。但现在我要处理另一个问题。我使用了这个连接字符串: SqlConnection con = new SqlConnection(@"Data Source=.\SQLEX
我有一组“用户”和一组“订单”。我想列出每个 user_id 的所有 order_id。 var users = { 0: { user_id: 111, us
我已经为我的Django应用创建了一个用户模型 class User(Model): """ The Authentication model. This contains the u
我被这个问题困住了，找不到解决方案。寻找一些方向。我正在用 laravel 开发一个新的项目，目前正致力于用户认证。我正在使用 Laravels 5.8 身份验证模块。 对密码恢复 View 做了一些
安装后我正在使用ansible配置几台计算机。 为此，我在机器上本地运行 ansible。安装中的“主要”用户通常具有不同的名称。我想将该用户用于诸如 become_user 之类的变量. “主要”用
我正在尝试制作一个运行 syncdb 的批处理文件来创建一个数据库文件，然后使用用户名“admin”和密码“admin”创建一个 super 用户。 到目前为止我的代码: python manage.
关闭。这个问题是opinion-based 。目前不接受答案。 想要改进这个问题吗？更新问题，以便 editing this post 可以用事实和引文来回答它。 . 已关闭 6 年前。 Improv
我已在 Azure 数据库服务器上设置异地复制。 服务器上运行的数据库之一具有我通过 SSMS 创建的登录名和用户: https://learn.microsoft.com/en-us/azure/s
我有一个 ionic 2 应用程序，正在使用 native FB Login 来检索名称/图片并将其保存到 NativeStorage。流程是我打开WelcomePage、登录并保存数据。从那里，na
这是我的用户身份验证方法: def user_login(request): if request.method == 'POST': username = request.P
我试图获取来自特定用户的所有推文，但是当我迭代在模板中抛出推文时，我得到“User”对象不可迭代 观看次数 tweets = User.objects.get(username__iexact='us
我是一名优秀的程序员,十分优秀！