Javascript 如何根据用户选择显示/排序特定的div
抱歉，如果标题没有准确描述我正在尝试做什么。至少可以说，我是个新手！为了帮助您理解我试图实现的目标，请阅读下面的示例 我有一个div列表，每个div可能都有一系列我将称之为“tag”的标签。对于本例，我将使用红色、蓝色和绿色作为可能的标记。每个标记还有一个链接到它的按钮，用户可以单击该按钮来过滤显示的div。当按钮为“开”时，它将显示带有该特定标记的div，但当按钮为“关”时，它将隐藏带有该标记的内容。除非内容有另一个当前已打开的标记 瑞德：开 蓝色：关 格林：开Javascript 如何根据用户选择显示/排序特定的div,javascript,jquery,html,css,Javascript,Jquery,Html,Css,抱歉，如果标题没有准确描述我正在尝试做什么。至少可以说，我是个新手！为了帮助您理解我试图实现的目标，请阅读下面的示例 我有一个div列表，每个div可能都有一系列我将称之为“tag”的标签。对于本例，我将使用红色、蓝色和绿色作为可能的标记。每个标记还有一个链接到它的按钮，用户可以单击该按钮来过滤显示的div。当按钮为“开”时，它将显示带有该特定标记的div，但当按钮为“关”时，它将隐藏带有该标记的内容。除非内容有另一个当前已打开的标记 瑞德：开 蓝色：关 格林：开 第一组：红色 第2组：蓝色
第一组：红色 第2组：蓝色 第3组：绿色 第四组：红色、蓝色 第五组：蓝色、绿色 第六组：绿色、红色 由于蓝色标记已关闭，因此除DIV 2外，将显示每个DIV。它仍然显示DIV 4和DIV 5的原因是红色和绿色标记仍处于打开状态。如果要同时关闭红色标记，则只会显示div 3、5和6，因为只有绿色标记处于打开状态 我相信有一种更优雅的方式来解释上述内容，但希望它能让人明白这一点。我一直在寻找一个解决方案，以实现这一点，但尚未找到它。有很多列表过滤器使用搜索框，但这不适合我的需要
如果有人能给我指出正确的方向，我会很感激的 我认为最简单的方法是将“标记”直接实现为类。任何div都可以有多个类，因此class=“red-blue”没有问题 然后，如果合适的话，您只需要一些javascript就可以将类的display更改为none
查看javascript的getElementsByCassName（）函数或jQuery的类选择器，以获得所有div，其中一个类等于刚刚更改的内容，并对其进行迭代，计算每个“display”样式属性的新值。因此这里有一个逻辑或： 如果红色、蓝色或绿色未关闭，则显示div
因此，这意味着当您在div中循环时，每个标记都需要有一个内循环，当您偶然发现一个未关闭的标记时，该内循环可能会中断，这意味着将显示div。否则，如果在查看所有标记后没有发现任何未关闭的标记，则必须隐藏div。我认为单用CSS无法解决此问题，因为您有一些具有多种颜色的div。您可以在CSS中模拟它，但它可能不是很优雅。我已经很长时间没有使用JavaScript了，或者根本没有使用JavaScript，因此解决方案可能需要一些整理，或者可能需要检查语法，但我认为我有一个潜在的框架可以使用 您可以设置三个颜色按钮，并将onClick（或jQuery等效项）设置为一个函数
<input type="button" id="buttonRed" name="buttonRed" onclick="theSwitch('red')" />
<input type="button" id="buttonGreen" name="buttonGreen" onclick="theSwitch('green')" />
<input type="button" id="buttonBlue" name="buttonBlue" onclick="theSwitch('blue')" />
divif (redStatus === 0 && greenStatus === 0) {
document.getElementById("divRedGreen").style.display = "none";
}
你可以做很多不同的事情，这取决于你要做的事情或是最有条理的事情，但我认为这可能会有帮助，因为这是一个松散的基础。下面是一个关于如何做到这一点的工作示例：
<!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>
//
按钮选择器测试
第一组：红色
第2组：蓝色
第3组：绿色
第四组：红色、蓝色
第五组：蓝色、绿色
第六组：绿色、红色
当然，可以根据您的需要修改它，但是正如您所看到的，它非常容易实现，而且很小。使用
标记<!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>