通过下拉菜单样式化SVG元素

Styling an SVG element via Drop Down Menu

本文关键字：SVG 元素 样式 下拉菜单      更新时间：2023-09-26

我有一个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>

就像现在一样，下拉菜单会改变颜色，但我希望在选择新选项时清除之前的选择。一次只能有一个正方形有颜色。我有一种感觉，我忽略了一些东西。我将感激任何帮助。谢谢你。

当值改变时，你必须删除其他元素的样式(例如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');
  })
})

当其中一个方块被选中时，你需要将其他方块的颜色重置为#FFF。

像这样:

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

相关文章：