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

Question

我有一个SVG平面图，并且尝试添加一个下拉菜单，该菜单可使人们选择要在地图上显示的位置。 我对jQuery的经验很少，但这是我在谷歌搜索时发现的代码中能够汇总的内容：

 $(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') } }); }) 

 <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> 

现在，下拉菜单将更改颜色，但是我希望在选择新选项时清除先前的选择。 一次只能有一个正方形具有颜色。 我觉得这是我忽略的事情。 我将不胜感激任何帮助。 谢谢。

Answer 1

当值更改时，您必须删除其他元素的样式（例如，设置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。

像这样：

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