根据输入过滤DOM元素- JavaScript
根据输入过滤DOM元素- JavaScript
提问于 2015-12-26 19:34:23
我有这样一个问题：
有几个复选框，我想根据这些复选框的状态(选中/未选中)过滤一些文档元素。
在页面的第一次加载中，将显示所有项目。如果复选框(Es)是(Are)选中的，那么将显示至少有一个这些属性的项。如果选中的项再次未被选中-隐藏元素(隐藏-因为这个检查动作确实)将再次出现。
我的计划是：
- 声明空数组：
- 从复选框(使用onchange)中推送它们的值。如果一个值已经存在，请删除该元素。
- 检查感兴趣的DOM元素至少有一个元素来自这些数组
我试过了，这是我的密码。但是不知道我做错了什么-我甚至无法估计在检查框时发生了什么。
任何关于修复这种不寻常的行为、编码风格和代码重构的帮助都是非常感谢的。也可以参考处理这种过滤的库/插件:)
顺便说一下，map、filter、some、every的导游更受欢迎;-)
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
var countries = [];
var collections = [];
var brands = [];
function cnt(x) {
if (countries.indexOf(x) == -1)
{
countries.push(x);
console.log(x+" pushed to countries");
}
else
{
i = countries.indexOf(x);
countries.splice(i,1);
console.log(x+" removed from countries");
}
console.log(countries);
}
function brnd(x) {
if (brands.indexOf(x) == -1)
{
brands.push(x);
console.log(x+" pushed to brands");
}
else
{
i = brands.indexOf(x);
brands.splice(i,1);
console.log(x+" removed from brands");
}
console.log(brands);
}
function col(x) {
if (collections.indexOf(x) == -1)
{
collections.push(x);
console.log(x+" pushed to collections");
}
else
{
i = collections.indexOf(x);
collections.splice(i,1);
console.log(x+" removed from collections");
}
console.log(collections);
}
function unuseful(el) {
if ((countries.length > 0) || (countries.length > 0) || (countries.length > 0))
{
country_index = countries.indexOf(el.dataset.country);
brand_index = brands.indexOf(el.dataset.brand);
collection_index = collections.indexOf(el.dataset.collection);
s = country_index + brand_index + collection_index;
return s == -3;
}
return false;
}
function h(x) {
x.style.display = 'none';
}
function hideBitches() {
var context = document.getElementById("products");
var items = context.getElementsByClassName("item");
for(j=0; len=items.length, j<len; ++j) {
if(unuseful(items[j])) {
h(items[j]);
console.log(items[j]+" is hidden")
}
}
}
</script>
<div id="countries">
<input type="checkbox" name="country" value="1" onchange="cnt(this.value); hideBitches()">
Poland
<input type="checkbox" name="country" value="2" onchange="cnt(this.value); hideBitches()">
Germany
<input type="checkbox" name="country" value="3" onchange="cnt(this.value); hideBitches()">
Venezuela
<input type="checkbox" name="country" value="4" onchange="cnt(this.value); hideBitches()">
Cuba
</div>
<div id="brand">
<input type="checkbox" name="brand" value="1" onchange="brnd(this.value); hideBitches()">
Laviva
<input type="checkbox" name="brand" value="2" onchange="brnd(this.value); hideBitches()">
Parmesan
<input type="checkbox" name="brand" value="3" onchange="brnd(this.value); hideBitches()">
Mercenarios
<input type="checkbox" name="brand" value="4" onchange="brnd(this.value); hideBitches()">
Penguin
</div>
<div id="collection">
<input type="checkbox" name="col" value="1" onchange="col(this.value); hideBitches()">
Mephistopheles
<input type="checkbox" name="col" value="2" onchange="col(this.value); hideBitches()">
Marsupial
<input type="checkbox" name="col" value="3" onchange="col(this.value); hideBitches()">
Cangaroo
<input type="checkbox" name="col" value="4" onchange="col(this.value); hideBitches()">
Aufhebung
<input type="checkbox" name="col" value="5" onchange="col(this.value); hideBitches()">
Nestor Makhno
</div>
<input type="submit" name="submit" value="search">
<div id="products">
<div class="item" data-country="3" data-collection="3" data-brand="3">
<p>Eternal cn 3br 3 cl 3</p>
<img src="/store/media/file000466623310.jpg" style="width:100px; height:50px">
<p>300*15*15</p>
</div>
<div class="item" data-country="2" data-collection="3" data-brand="1">
<p>Eternity cn 2br 1 cl 3</p>
<img src="/store/media/file000466623310.jpg" style="width:100px; height:50px">
<p>320*15*12</p>
</div>
<div class="item" data-country="4" data-collection="2" data-brand="2">
<p>Ether cn 4br 2 cl 2</p>
<img src="/store/media/file000466623310.jpg" style="width:100px; height:50px">
<p>330*20*15</p>
</div>
<div class="item" data-country="2" data-collection="3" data-brand="1">
<p>Leather cn 2br 1 cl 3</p>
<img src="/store/media/file000466623310.jpg" style="width:100px; height:50px">
<p>350*25*18</p>
</div>
<div class="item" data-country="3" data-collection="1" data-brand="4">
<p>FLeather cn 3br 4 cl 1</p>
<img src="/store/media/file000466623310.jpg" style="width:100px; height:50px">
<p>350*25*18</p>
</div>
<div class="item" data-country="2" data-collection="4" data-brand="3">
<p>Feather cn 2br 3 cl 4</p>
<img src="/store/media/file000466623310.jpg" style="width:100px; height:50px">
<p>250*15*28</p>
</div>
<div class="item" data-country="4" data-collection="3" data-brand="2">
<p>Weather cn 4br 2 cl 3</p>
<img src="/store/media/file000466623310.jpg" style="width:100px; height:50px">
<p>250*16*28</p>
</div>
<div class="item" data-country="3" data-collection="1" data-brand="2">
<p>Theatre cn 3br 2 cl 1</p>
<img src="/store/media/file000466623310.jpg" style="width:100px; height:50px">
<p>150*20*18</p>
</div>
</div>
</body>
</html>
回答 2
Stack Overflow用户
回答已采纳
发布于 2015-12-26 23:18:21
我已经用下面的线条实现了这一点。
<script type="text/javascript">
var countries = [];
var collections = [];
var brands = [];
function cnt(x) {
if (countries.indexOf(x) == -1)
{
countries.push(x);
console.log(x+" pushed to countries");
}
else
{
i = countries.indexOf(x);
countries.splice(i,1);
console.log(x+" removed from countries");
}
console.log(countries);
}
function brnd(x) {
if (brands.indexOf(x) == -1)
{
brands.push(x);
console.log(x+" pushed to brands");
}
else
{
i = brands.indexOf(x);
brands.splice(i,1);
console.log(x+" removed from brands");
}
console.log(brands);
}
function col(x) {
if (collections.indexOf(x) == -1)
{
collections.push(x);
console.log(x+" pushed to collections");
}
else
{
i = collections.indexOf(x);
collections.splice(i,1);
console.log(x+" removed from collections");
}
console.log(collections);
}
function hideBitches() {
var context = document.getElementById('products');
var items = context.getElementsByClassName('item');
for (i=0, len = items.length; i<len; ++i) {
b1 = countries.some(c=> c == items[i].dataset.country);
b2 = brands.some(b=> b == items[i].dataset.brands);
b3 = collections.some(l=> l == items[i].dataset.collections);
if ((b1||b2||b3) == false) {
items[i].style.display = "none";
} else {
items[i].style.display = "block";
}
console.log("country: "+b1+" brand: "+b2+" collection: "+b3);
}
}
</script>Stack Overflow用户
发布于 2015-12-26 20:33:17
尝尝这个。这是使用jQuery (一个方便的javascript库)。使用它，您甚至不需要使用数组来完成所有这些事情：
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="countries">
<input type="checkbox" name="country" value="1">
Poland
<input type="checkbox" name="country" value="2" >
Germany
<input type="checkbox" name="country" value="3" >
Venezuela
<input type="checkbox" name="country" value="4" >
Cuba
</div>
<div id="brand">
<input type="checkbox" name="brand" value="1" >
Laviva
<input type="checkbox" name="brand" value="2" >
Parmesan
<input type="checkbox" name="brand" value="3" >
Mercenarios
<input type="checkbox" name="brand" value="4" >
Penguin
</div>
<div id="collection">
<input type="checkbox" name="col" value="1" >
Mephistopheles
<input type="checkbox" name="col" value="2" >
Marsupial
<input type="checkbox" name="col" value="3" >
Cangaroo
<input type="checkbox" name="col" value="4" >
Aufhebung
<input type="checkbox" name="col" value="5" >
Nestor Makhno
</div>
<input type="submit" name="submit" value="search">
<div id="products">
<div class="item" data-country="3" data-collection="3" data-brand="3">
<p>Eternal cn 3br 3 cl 3</p>
<img src="/store/media/file000466623310.jpg" style="width:100px; height:50px">
<p>300*15*15</p>
</div>
<div class="item" data-country="2" data-collection="3" data-brand="1">
<p>Eternity cn 2br 1 cl 3</p>
<img src="/store/media/file000466623310.jpg" style="width:100px; height:50px">
<p>320*15*12</p>
</div>
<div class="item" data-country="4" data-collection="2" data-brand="2">
<p>Ether cn 4br 2 cl 2</p>
<img src="/store/media/file000466623310.jpg" style="width:100px; height:50px">
<p>330*20*15</p>
</div>
<div class="item" data-country="2" data-collection="3" data-brand="1">
<p>Leather cn 2br 1 cl 3</p>
<img src="/store/media/file000466623310.jpg" style="width:100px; height:50px">
<p>350*25*18</p>
</div>
<div class="item" data-country="3" data-collection="1" data-brand="4">
<p>FLeather cn 3br 4 cl 1</p>
<img src="/store/media/file000466623310.jpg" style="width:100px; height:50px">
<p>350*25*18</p>
</div>
<div class="item" data-country="2" data-collection="4" data-brand="3">
<p>Feather cn 2br 3 cl 4</p>
<img src="/store/media/file000466623310.jpg" style="width:100px; height:50px">
<p>250*15*28</p>
</div>
<div class="item" data-country="4" data-collection="3" data-brand="2">
<p>Weather cn 4br 2 cl 3</p>
<img src="/store/media/file000466623310.jpg" style="width:100px; height:50px">
<p>250*16*28</p>
</div>
<div class="item" data-country="3" data-collection="1" data-brand="2">
<p>Theatre cn 3br 2 cl 1</p>
<img src="/store/media/file000466623310.jpg" style="width:100px; height:50px">
<p>150*20*18</p>
</div>
</div>
<script src="http://code.jquery.com/jquery-2.1.4.js"></script>
<script type="text/javascript">
$('#countries input[type=checkbox]').click(function(){
var x=$(this).val();
$('.item').each(function(){
if($(this).data('country')!=x){
$(this).hide();
}
else{
$(this).show();
}
});
});
$('#brand input[type=checkbox]').click(function(){
var x=$(this).val();
$('.item').each(function(){
if($(this).data('brand')!=x){
$(this).hide();
}
else{
$(this).show();
}
});
});
$('#collection input[type=checkbox]').click(function(){
var x=$(this).val();
$('.item').each(function(){
if($(this).data('collection')!=x){
$(this).hide();
}
else{
$(this).show();
}
});
});
</script>
</body>
</html>下面是一个有用的小提琴：https://jsfiddle.net/0b6r64sL/
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/34474551
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号