javascript - 单击 svg 路径并更改所选组件上的选项值

Question

目前我有一些代码，当从下拉列表中选择一个值时将绘制 svg 图像的特定路径。

var paths1 = {
  "https://www.google.com": {
    color: "#eb8c00",
    selector: "#path1"
  },
  "https://www.yahoo.com": {
    color: "#eb8c00",
    selector: "#path2"
  },
}

$('#path').on("change", function() {
  $('#path1, #path2').css({
    fill: "#FFFFFF"
  });

  var value = $(this).val()
  
  if (!value) {
    return;
  }

  var {
    color,
    selector
  } = paths1[value]
  
  $(selector).css({
    fill: color
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div name="svg">
  <svg id="Layer_1" version="1.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>
</div>

<select id="path" name="path" class="pathSelector">
  <option value="">Select Path</option>
  <option value="https://www.google.com">Google</option>
  <option value="https://www.yahoo.com">Yahoo</option>
</select>

<div>
  <input 
    type="button" 
    class="selectbutton" 
    value="Select" 
    onClick="window.open(path.value,'newtab'+path.value)">
</div>

它工作正常，因为按钮也会重定向到不同的页面。现在我需要能够反向。我想点击一个路径，下拉选择器也会改变。单击路径 1 将选择 Google，单击路径 2 将从我的下拉列表中选择雅虎。

我怎样才能做到这一点？

Answer 1

为此，您可以定义一个点击事件处理程序:

$('#Layer_1 path').on("click", function() {...});

并使用 for in 循环将 paths1 数组中的 selector 值与点击路径的 ID 进行比较:

for (key in paths1) {
  if (paths1[key].selector == '#' + this.id) {...}
}

如果找到匹配项，您可以使用键选择option标签并为其分配selected属性:

$('option[value="' + key + '"]').prop('selected', true);

一起:

$('#Layer_1 path').on("click", function() {
  for (key in paths1) {
    if (paths1[key].selector == '#' + this.id) {
      $('option[value="' + key + '"]').prop('selected', true);
    }
  }
});

您还可以更改类似于其他事件处理程序的颜色:

$('#Layer_1 path').on("click", function() {
  for (key in paths1) {
    if (paths1[key].selector == '#' + this.id) {
      $('option[value="' + key + '"]').prop('selected', true);
      
      $('#path1, #path2').css({
        fill: "#FFFFFF"
      });
  
      $(this).css({fill: paths1[key].color});
    }
  }
});

工作示例:

var paths1 = {
  "https://www.google.com": {
    color: "#eb8c00",
    selector: "#path1"
  },
  "https://www.yahoo.com": {
    color: "#eb8c00",
    selector: "#path2"
  },
}

$('#path').on("change", function() {
  $('#path1, #path2').css({
    fill: "#FFFFFF"
  });

  var value = $(this).val()
  
  if (!value) {
    return;
  }

  var {
    color,
    selector
  } = paths1[value]
  
  $(selector).css({
    fill: color
  });
});

$('#Layer_1 path').on("click", function() {
  for (key in paths1) {
    if (paths1[key].selector == '#' + this.id) {
      $('option[value="' + key + '"]').prop('selected', true);
      
      $('#path1, #path2').css({
        fill: "#FFFFFF"
      });
  
      $(this).css({fill: paths1[key].color});
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div name="svg">
  <svg id="Layer_1" version="1.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>
</div>

<select id="path" name="path" class="pathSelector">
  <option value="">Select Path</option>
  <option value="https://www.google.com">Google</option>
  <option value="https://www.yahoo.com">Yahoo</option>
</select>

<div>
  <input 
    type="button" 
    class="selectbutton" 
    value="Select" 
    onClick="window.open(path.value,'newtab'+path.value)">
</div>