Question

我有一个SVG平面图，我尝试添加一个下拉菜单，让人们选择一个位置让它出现在地图上。我对jQuery的经验很少，但这是我能够通过Google搜索时找到的代码整合起来的：

＆＃13;

$(function() {
$('select').change(function() {
var s = $(this).find('option:selected').text();
if(s == "Left") {
$('#rleft').css('fill', 'green');
}
else if(s == "Middle") {
$('#rmiddle').css('fill', 'orange')
}
else if(s == "Right") {
$('#rright').css('fill', 'red')
}
});
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
<option value="blank">Select a Location</option>
<option value="left">Left</option>
<option value="middle">Middle</option>
<option value="right">Right</option>
</select>

<svg height="170" width="500">
<rect id="rleft" x="10" y="10" width="150" height="150" fill="#FFFFFF" stroke="#000000" />
<rect id="rmiddle" x="170" y="10" width="150" height="150" fill="#FFFFFF" stroke="#000000" />
<rect id="rright" x="330" y="10" width="150" height="150" fill="#FFFFFF" stroke="#000000" />
</svg>

＆＃13;

就像现在一样，下拉菜单会改变颜色，但我希望在选择新选项时清除之前的选项。一次只能有一个正方形颜色。我觉得这是我可以忽视的事情。我将不胜感激任何帮助。谢谢。

Answer 1

当值发生变化时，您必须删除其他元素的样式（例如set fill：none）。

$(function() {
  $('select').change(function() {
    var s = $(this).val();
    $('#rleft').css('fill', s == "left"?'green':'none');
    $('#rmiddle').css('fill', s == "middle"?'orange':'none');
    $('#rright').css('fill', s == "right"?'red':'none');
  })
})

Answer 2

当选择其中一个方格时，您需要将其他方格的颜色重置为#FFF。

这样的事情：

＆＃13;

if (s == "Left") {
  $('#rleft').css('fill', 'green');
  // set colors back to white
  $('#rmiddle').css('fill', '#FFF');
  $('#rright').css('fill', '#FFF');
}

＆＃13;

通过下拉菜单设置SVG元素的样式

2 个答案: