通過下拉菜單設置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'); }