所以基本上我正在構建一個地圖，它將根據人們在選單上選擇的國家/地區更改分段顏色。所以選擇 A 會將 SVG 路徑從白色填充到橙色。選擇 B 只會點亮對應的 SVG 路徑，依此類推。
這是我的代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<select name="country" id="country">
<option>Select color</option>
<option value="countryA">A</option>
<option value="countryB">B</option>
</select>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="500px" height="500px" viewBox="0 0 500 500" enable-background="new 0 0 500 500" xml:space="preserve">
<path id="path1" fill="#FFFFFF" stroke="#231F20" stroke-miterlimit="10" d="M291.451,51.919v202.54c0,0,164.521,119.846,140.146,0
C407.227,134.613,291.451,51.919,291.451,51.919z" />
<path id="path2" fill="#FFFFFF" stroke="#231F20" stroke-miterlimit="10" d="M169.595,150.844c0,0-76.24,69.615-40.606,128.309
c35.634,58.695,155.798-51.867,151.654-85.993C276.498,159.034,177.054,89.42,169.595,150.844z"/>
</svg>
<script type="text/javascript">
$('#country').on("change", function () {
const value = $(this).val("countryA")
$('#path1').css({ fill: "#FFA500" });
const value = $(this).val("countryB")
$('#path2').css({ fill: "#FFA500" });
});
</script>
</body>
</html>
如果我只有 Country A 常量，它將正常作業并更改 path1 顏色。當我添加 countryB 時，它就會停止作業。如何在我的國家函式中擁有超過 1 個變數。
uj5u.com熱心網友回復：
根據選擇的選項設定css，即選擇值。
var countriesAndColors = {
"countryA": {
color: "red",
selector: "#path1"
},
"countryB": {
color: "blue",
selector: "#path2"
},
}
$('#country').on("change", function() {
// reset all to transparent
$('#path1, #path2').css({
fill: "rgba(0,0,0,0)"
});
var value = $(this).val()
if (!value) {
return;
}
var {color, selector} = countriesAndColors[value]
$(selector).css({
fill: color
});
});<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<select name="country" id="country">
<option value="">Select color</option>
<option value="countryA">A</option>
<option value="countryB">B</option>
</select>
<br>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="500px" height="500px" viewBox="0 0 500 500" enable-background="new 0 0 500 500" xml:space="preserve">
<path id="path1" fill="#FFFFFF" stroke="#231F20" stroke-miterlimit="10" d="M291.451,51.919v202.54c0,0,164.521,119.846,140.146,0
C407.227,134.613,291.451,51.919,291.451,51.919z" />
<path id="path2" fill="#FFFFFF" stroke="#231F20" stroke-miterlimit="10" d="M169.595,150.844c0,0-76.24,69.615-40.606,128.309
c35.634,58.695,155.798-51.867,151.654-85.993C276.498,159.034,177.054,89.42,169.595,150.844z"/>
</svg>
</body>轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/523041.html