在JavaScript中使用checkbox输入过滤颜色 [英] Filter colours with checkbox input in JavaScript
本文介绍了在JavaScript中使用checkbox输入过滤颜色的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在研究网络开发，我正在做一个关于旅行社的项目。在家里，我有一个大的世界地图，其中每个国家是一个图像和有一个类。我想做的是，当你检查一个输入（例如低成本）的国家，那里的航班，其成本不比180欧元更昂贵的颜色变为绿色。默认情况下，它们具有橙色。我已经创建了图像和输入，我已经创建了JavaScript代码，但是有些东西不工作，因为颜色不会改变，并且在控制台中没有错误。所以如果你能帮助我一点点，我会真的很高兴。
我共享html，css和JavaScript代码。
HTML
var vuelosfrance = {VuelosFrancia ：Paris，dates：[{fecha：15/10/2014，precio：185}，{fecha：16/10/2014，precio：200} {fecha：19/10/2014，precio：225}]}，{city：Marsella，dates：[{fecha：15/10/2014， precio：195}，{fecha：18/10/2014，precio：230}，{fecha：20/10/2014，precio：220}]}，]} // var VuelosSpain = JSON.parse（vuelosspain）var lowcost = document.getElementById（'checkbox_lowcost'）; var espana = document.getElementsByClassName（'spain'）; var espanagreen = document.getElementsByClassName（'spaingreen'）; function filtrar ）{console.log（'a'）for（i in vuelosspain [VuelosSpain]）{console.log（'b'）; for（x in vuelosspain [VuelosSpain] [i] [dates]）{var precio = vuelosspain [VuelosSpain] [i] [dates] [x] [precio]; console.log（'c'）if（precio.value< 180）{console.log（'d'）; espana [0] .className（'spain display'）; espanagreen [0] .className（'spaingreen'）}}}} if（lowcost.checked == true）{console.log（'e'）filtrar };
body {width：100％; height：1300px ; background-image：url（../ images / nubes.jpg）; background-size：100％100％} bd {width：75％; margin-left：75px; position：relative; } #checkbox_id {display：inline-block; vertical-align：top; } #mapamundo {display：block; } .spain {display：block; position：absolute; top：24.4％; left：41.9％; } .spaingreen {display：block; position：absolute; top：24.4％; left：41.9％; } .portugal {display：block; position：absolute; top：26.75％; left：41.4％; } .francia {display：block; position：absolute; top：20.1％; left：43.6％; }
< header>< img src = ./images/logo2dms300.png\"> ;</header> < ul id =menu> < li> < p>费用< / p> < ul> < li>< li>< li>< / li>< p>< < li>< li>< li>< input type =checkboxname =checkboxid =checkbox_mediumcostvalue =value>< p class =textfilters> Medium Cost< / p& < li>< li>< / li>< / li>< / li>< < / ul> < / li> < li> < p>主题< / p> < ul> <李><输入类型=复选框NAME =复选框ID =checkbox_idVALUE =值><，P类=textfilters>冒险< / P>< /李> < li>< li>< input type =checkboxname =checkboxid =checkbox_idvalue =value>< p class =textfilters>海滩< / p>< / li> <李><输入类型=复选框NAME =复选框ID =checkbox_idVALUE =值><，P类=textfilters>雪< / P>< /李> <李><输入类型=复选框NAME =复选框ID =checkbox_idVALUE =值><，P类=textfilters>放松< / P>< /李> < / ul> < / li> < / ul> < section class =bd ilblock> < img src =../ images / mapas / mapamundidefinitivo.svg.pngid =mapamundo> < img src =../ images / mapas / spain36default.pngclass =spain> < img src =../ images / mapas / spain36green.pngclass =spaingreen display> < img src =../ images / mapas / portugal18default.pngclass =portugal display> < img src =../ images / mapas / portugal18green.pngclass =portugal> < img src =../ images / mapas / francia31default.pngclass =francia display> < img src =../ images / mapas / francia31green.pngclass =francia>< / section>
>
解决方案
哇，这真的很难看看代码，但如果你想改变基于复选框的国家， this：
var checkbox = document.querySelector（input [type ='checkbox']）;
var cheapCountries = document.getElementsByClassName（cheap）;
checkbox.addEventListener（click，function（）{
if（this.checked）{
for（var i = 0; i< cheapCountries.length; i ++ ）{
cheapCountries [i] .style.background =green;
}
}
else {
for（var i = 0; i< cheapCountries .length; i ++）{
cheapCountries [i] .style.background =orange;
}
}
}）;
只是一个简单的复选框处理程序，它查找您在地图上的所有国家/地区name = cheap，然后更改其背景颜色。或者你可以使用addClass和removeClass。
希望有帮助！
I'm studing web development and I'm doing a project about a travel agency. In the home I have a big world map where each country is an image and has a class. What I want to do is that when you check an input( for exemple 'Low Cost') the countries where there are flights which their cost is not more expensive than 180 euros change their color to green. By default they have orange color. I have created the images and the inputs, and I have made the JavaScript code, but something is not working because the color doesn't change and there's no errors in the console. So if you could help me a little bit I would be really happy.
I share the html, the css and the JavaScript code.
HTML
var vuelosfrance= {"VuelosFrancia":
[
{"city":"Paris",
"dates":
[
{"fecha": "15/10/2014","precio": 185 },
{"fecha": "16/10/2014","precio": 200 },
{"fecha": "19/10/2014","precio": 225 }
]
},
{"city":"Marsella",
"dates":
[
{"fecha": "15/10/2014","precio": 195 },
{"fecha": "18/10/2014","precio": 230 },
{"fecha": "20/10/2014","precio": 220 }
]
},
]
}
// var VuelosSpain = JSON.parse(vuelosspain)
var lowcost = document.getElementById('checkbox_lowcost');
var espana = document.getElementsByClassName('spain');
var espanagreen = document.getElementsByClassName('spaingreen');
function filtrar() {
console.log('a')
for(i in vuelosspain["VuelosSpain"]) {
console.log('b');
for(x in vuelosspain["VuelosSpain"][i]["dates"]) {
var precio = vuelosspain["VuelosSpain"][i]["dates"][x]["precio"];
console.log('c')
if (precio.value < 180) {
console.log('d');
espana[0].className('spain display');
espanagreen[0].className('spaingreen')
}
}
}
}
if (lowcost.checked == true) {
console.log('e') filtrar(); };
body {
width: 100%;
height: 1300px;
background-image: url(../images/nubes.jpg);
background-size: 100% 100%
}
.bd {
width: 75%;
margin-left: 75px;
position: relative; }
#checkbox_id {
display:inline-block;
vertical-align: top; }
#mapamundo {
display: block; }
.spain {
display: block;
position: absolute;
top: 24.4%;
left: 41.9%; }
.spaingreen {
display: block;
position: absolute;
top: 24.4%;
left: 41.9%; }
.portugal {
display: block;
position: absolute;
top: 26.75%;
left: 41.4%; }
.francia {
display: block;
position: absolute;
top: 20.1%;
left: 43.6%; }
<header><img src="../images/logo2dms300.png"></header>
<ul id="menu">
<li>
<p>Cost</p>
<ul>
<li><input type="checkbox" name="checkbox" id="checkbox_lowcost" value="value"><p class="textfilters">Low Cost</p></li>
<li><input type="checkbox" name="checkbox" id="checkbox_mediumcost" value="value"><p class="textfilters">Medium Cost</p></li>
<li><input type="checkbox" name="checkbox" id="checkbox_highcost" value="value"><p class="textfilters">High Cost</p></li>
</ul>
</li>
<li>
<p>Theme</p>
<ul>
<li><input type="checkbox" name="checkbox" id="checkbox_id" value="value"><p class="textfilters">Adventure</p></li>
<li><input type="checkbox" name="checkbox" id="checkbox_id" value="value"><p class="textfilters">Sun & Beach</p></li>
<li><input type="checkbox" name="checkbox" id="checkbox_id" value="value"><p class="textfilters">Snow</p></li>
<li><input type="checkbox" name="checkbox" id="checkbox_id" value="value"><p class="textfilters">Relax</p></li>
</ul>
</li>
</ul>
<section class="bd ilblock">
<img src="../images/mapas/mapamundidefinitivo.svg.png" id="mapamundo">
<img src="../images/mapas/spain36default.png" class="spain ">
<img src="../images/mapas/spain36green.png" class="spaingreen display">
<img src="../images/mapas/portugal18default.png" class="portugal display">
<img src="../images/mapas/portugal18green.png" class="portugal">
<img src="../images/mapas/francia31default.png" class="francia display">
<img src="../images/mapas/francia31green.png" class="francia">
</section>
解决方案
Wow, that's really hard code to look at, but if you want to change the countries based on a checkbox, try this:
var checkbox = document.querySelector("input[type='checkbox']");
var cheapCountries = document.getElementsByClassName("cheap");
checkbox.addEventListener("click", function() {
if (this.checked) {
for (var i=0; i < cheapCountries.length; i++) {
cheapCountries[i].style.background = "green";
}
}
else {
for (var i=0; i < cheapCountries.length; i++) {
cheapCountries[i].style.background = "orange";
}
}
});
Just a simple checkbox handler that finds all the countries (divs) you have on your map with the class name = cheap, then changes their background colour. Or you could use addClass and removeClass.
Hope that helps!
这篇关于在JavaScript中使用checkbox输入过滤颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
