Filter colours with checkbox input in JavaScript

问题:

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>

回答1:

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!