我需要能够在复选框选中时更改变量的值。
我要做的是，当选中Area 1单选按钮时，图例吐出以下值：
var populationScore1 = 50000;
var populationScore2 = 100000;
var populationScore3 = 250000;
var populationScore4 = 500000;
var populationScore5 = 10000000;
当选中Area 2单选按钮时，图例将显示以下值：
var populationScore1 = 100000;
var populationScore2 = 200000;
var populationScore3 = 500000;
var populationScore4 = 1000000;
var populationScore5 = 20000000;
我在下面创建了一个简单的if语句：
有问题的代码如下：
if(area1.checked) {
var populationScore1 = 50000;
var populationScore2 = 100000;
var populationScore3 = 250000;
var populationScore4 = 500000;
var populationScore5 = 10000000;
} else if (area2.checked) {
var populationScore1 = 100000;
var populationScore2 = 200000;
var populationScore3 = 500000;
var populationScore4 = 1000000;
var populationScore5 = 20000000;
}
而且仅在我手动将选中状态添加到单选按钮时，它才能在页面加载中正常工作
完整的代码如下：
var map;
//COLORS
// Population Map Color
var populationColor = ""; // polygon fill color
var populationColor1 = '#edf8fb';
var populationColor2 = '#b2e2e2';
var populationColor3 = '#66c2a4';
var populationColor4 = '#2ca25f';
var populationColor5 = '#006d2c';
// LEGEND SCORES
// Population Map Score
if(area1.checked) {
var populationScore1 = 50000;
var populationScore2 = 100000;
var populationScore3 = 250000;
var populationScore4 = 500000;
var populationScore5 = 10000000;
} else if (area2.checked) {
var populationScore1 = 100000;
var populationScore2 = 200000;
var populationScore3 = 500000;
var populationScore4 = 1000000;
var populationScore5 = 20000000;
}
// LEGEND
// Population Legend
document.getElementById('populationLegend').innerHTML =
"<div id='populationLegend'>" +
"<div class='legend-title'>Population</div>" +
"<div class='legend-scale'>" +
"<ul class='legend-labels'>" +
"<li><span style='background:" + populationColor1 + "'></span>0 - " + populationScore1.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") + "</li>" +
"<li><span style='background:" + populationColor2 + "'></span>" + populationScore1.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") + " - " + populationScore2.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") + "</li>" +
"<li><span style='background:" + populationColor3 + "'></span>" + populationScore2.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") + " - " + populationScore3.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") + "</li>" +
"<li><span style='background:" + populationColor4 + "'></span>" + populationScore3.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") + " - " + populationScore4.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") + "</li>" +
"<li><span style='background:" + populationColor5 + "'></span>" + populationScore4.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") + " - " + populationScore5.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") + "</li>" +
"</ul>" +
"</div>" +
"</div>";
function show1(){
document.getElementById('my-legend').style.display ='none';
}
function show2(){
document.getElementById('my-legend').style.display = 'block';
document.getElementById('populationLegend').style.display = 'block';
} #my-legend {
position: absolute;
bottom: 5%;
left: 2%;
z-index: 5;
background-color: #fff;
padding: 5px;
font-family: 'Roboto','sans-serif';
line-height: 30px;
padding-left: 10px;
border-radius: 3px;
box-sizing: border-box;
-moz-box-sizing: border-box;
outline: none;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
display: none;
}
#my-legend .legend-title {
text-align: left;
margin-bottom: 5px;
font-weight: bold;
font-size: 90%;
}
#my-legend .legend-scale ul {
margin: 0;
margin-bottom: 10px;
padding: 0;
float: left;
list-style: none;
}
#my-legend .legend-scale ul li {
font-size: 70%;
list-style: none;
margin-left: 0;
line-height: 16px;
margin-bottom: 2px;
}
#my-legend ul.legend-labels li span {
display: block;
float: left;
height: 17px;
width: 20px;
margin-right: 5px;
margin-left: 0;
}
#my-legend ul.legend-labels li:first-child span {
border-radius: 4px 4px 0 0;
}
#my-legend ul.legend-labels li:last-child span {
border-radius: 0 0 4px 4px;
}
#my-legend a {
color: #777;
}
input #a {
border: 1px black solid;
border-radius: 4px 0 0 4px;
} <div id="maptype">
<div id="content">
<form class="form">
<div class="switch-field">
<input type="radio" id="area1" name="switch-two" checked/>
<label for="area1">Area 1</label>
<input type="radio" id="area2" name="switch-two"/>
<label for="area2">Area 2</label>
</div>
</form>
<label class="container" style="margin-top: 12px;" onclick="show1();">No Legend
<input type="radio" checked="checked" name="radio" id="area">
<span class="checkmark"></span>
</label>
<label class="container" onclick="show2();">Legend
<input type="radio" name="radio" id="Population">
<span class="checkmark"></span>
</label>
</div>
</div>
<div id="my-legend">
<div id="populationLegend">
</div>
</div>我假设我需要在某个地方添加事件监听器，但是我不确定
最佳答案
使用您编写的代码并进行尽可能少的修改，解决方案是1）创建update()函数，以及2）设置无线电的onclick="update()"属性。
<style>
#my-legend {
position: absolute;
bottom: 5%;
left: 2%;
z-index: 5;
background-color: #fff;
padding: 5px;
font-family: 'Roboto','sans-serif';
line-height: 30px;
padding-left: 10px;
border-radius: 3px;
box-sizing: border-box;
-moz-box-sizing: border-box;
outline: none;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
display: none;
}
#my-legend .legend-title {
text-align: left;
margin-bottom: 5px;
font-weight: bold;
font-size: 90%;
}
#my-legend .legend-scale ul {
margin: 0;
margin-bottom: 10px;
padding: 0;
float: left;
list-style: none;
}
#my-legend .legend-scale ul li {
font-size: 70%;
list-style: none;
margin-left: 0;
line-height: 16px;
margin-bottom: 2px;
}
#my-legend ul.legend-labels li span {
display: block;
float: left;
height: 17px;
width: 20px;
margin-right: 5px;
margin-left: 0;
}
#my-legend ul.legend-labels li:first-child span {
border-radius: 4px 4px 0 0;
}
#my-legend ul.legend-labels li:last-child span {
border-radius: 0 0 4px 4px;
}
#my-legend a {
color: #777;
}
input #a {
border: 1px black solid;
border-radius: 4px 0 0 4px;
}
</style>
<div id="maptype">
<div id="content">
<form class="form">
<div class="switch-field">
<input type="radio" id="area1" name="switch-two" onclick="update();" checked/>
<label for="area1">Area 1</label>
<input type="radio" id="area2" name="switch-two" onclick="update();" />
<label for="area2">Area 2</label>
</div>
</form>
<label class="container" style="margin-top: 12px;" onclick="show1();">No Legend
<input type="radio" checked="checked" name="radio" id="area">
<span class="checkmark"></span>
</label>
<label class="container" onclick="show2();">Legend
<input type="radio" name="radio" id="Population">
<span class="checkmark"></span>
</label>
</div>
</div>
<div id="my-legend">
<div id="populationLegend"></div>
</div>
</div>
</div>
<script>
var map;
//COLORS
// Population Map Color
var populationColor = ""; // polygon fill color
var populationColor1 = '#edf8fb';
var populationColor2 = '#b2e2e2';
var populationColor3 = '#66c2a4';
var populationColor4 = '#2ca25f';
var populationColor5 = '#006d2c';
function update() {
// LEGEND SCORES
// Population Map Score
if (area1.checked) {
var populationScore1 = 50000;
var populationScore2 = 100000;
var populationScore3 = 250000;
var populationScore4 = 500000;
var populationScore5 = 10000000;
} else if (area2.checked) {
var populationScore1 = 100000;
var populationScore2 = 200000;
var populationScore3 = 500000;
var populationScore4 = 1000000;
var populationScore5 = 20000000;
}
// LEGEND
// Population Legend
document.getElementById('populationLegend').innerHTML =
"<div id='populationLegend'>" +
"<div class='legend-title'>Population</div>" +
"<div class='legend-scale'>" +
"<ul class='legend-labels'>" +
"<li><span style='background:" + populationColor1 + "'></span>0 - " + populationScore1.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") + "</li>" +
"<li><span style='background:" + populationColor2 + "'></span>" + populationScore1.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") + " - " + populationScore2.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") + "</li>" +
"<li><span style='background:" + populationColor3 + "'></span>" + populationScore2.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") + " - " + populationScore3.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") + "</li>" +
"<li><span style='background:" + populationColor4 + "'></span>" + populationScore3.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") + " - " + populationScore4.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") + "</li>" +
"<li><span style='background:" + populationColor5 + "'></span>" + populationScore4.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") + " - " + populationScore5.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") + "</li>" +
"</ul>" +
"</div>" +
"</div>";
}
update();
function show1() {
document.getElementById('my-legend').style.display = 'none';
}
function show2() {
document.getElementById('my-legend').style.display = 'block';
document.getElementById('populationLegend').style.display = 'block';
}
</script>
关于javascript - 在复选框上更改变量值，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/55788570/