javascript - 使用 JavaScript 中的复选框输入过滤颜色

Question

我正在学习网络开发，并且正在做一个关于旅行社的元素。在家里，我有一张很大的世界地图，其中每个国家都是一个图像并且有一个等级。我想要做的是，当您检查输入(例如“低成本”)时，有航类成本不超过 180 欧元的国家/地区将颜色更改为绿色。默认情况下，它们具有橙色。我已经创建了图像和输入，并且编写了 JavaScript 代码，但是有些东西不起作用，因为颜色没有改变并且控制台中没有错误。所以，如果你能帮我一点忙，我会很高兴。

我分享了 html、css 和 JavaScript 代码。

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>

Answer 1

哇，这真是很难看的代码，但是如果你想根据复选框更改国家/地区，试试这个:

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";            
        }   
    }
});

只是一个简单的复选框处理程序，它可以找到您在 map 上具有类名称 = 便宜的所有国家 (divs)，然后更改它们的背景颜色。或者您可以使用 addClass 和 removeClass。

希望对您有所帮助!