單擊svg路徑并更改選擇組件上的選項值-有解無憂

目前我有一些代碼，當從下拉串列中選擇一個值時，將繪制一個 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>

它作業正常，因為按鈕也會重定向到不同的頁面。現在我需要能夠反轉。我想點擊一個路徑，下拉選擇器也會改變。單擊 path1 將選擇 Google，單擊 path2 將從我的下拉串列中選擇 Yahoo。

我怎樣才能做到這一點？

uj5u.com熱心網友回復：

為此，您可以定義一個單擊事件處理程式：

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

并使用for in回圈將陣列selector中的值paths1與單擊路徑的 ID 進行比較：

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

如果您找到匹配項，您可以使用key選擇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>

uj5u.com熱心網友回復：

這是一個代碼，您可以作為示例查看。它必須有幫助。祝你好運。

      function SelectADropdownItem(id, val) {
        var d = document.getElementById(id);
        for (var i = 0; i < d.length; i  ) {
          if (d[i].value == val) {
            d[i].selected = true;
          } else {
            d[i].selected = false;
          }
        }
      }

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <img
      onclick="SelectADropdownItem('design-dropdown','Fleur')"
      src="//www.willmaster.com/library/images/ImageClickSelects/flower.jpg"
      style="
        border: none;
        height: 120px;
        width: 94px;
        cursor: pointer;
        margin: 0 5px 0 5px;
      "
      alt="Flower design"
    />
    <img
      onclick="SelectADropdownItem('design-dropdown','Nine Patch')"
      src="//www.willmaster.com/library/images/ImageClickSelects/ninepatch.jpg"
      style="
        border: none;
        height: 120px;
        width: 94px;
        cursor: pointer;
        margin: 0 5px 0 5px;
      "
      alt="Nine patch design"
    />
    <img
      onclick="SelectADropdownItem('design-dropdown','Pink Gate')"
      src="//www.willmaster.com/library/images/ImageClickSelects/pinkgate.jpg"
      style="
        border: none;
        height: 120px;
        width: 94px;
        cursor: pointer;
        margin: 0 5px 0 5px;
      "
      alt="Pink gate design"
    />
    <br />
    <img
      onclick="SelectADropdownItem('design-dropdown','Sand Dollar')"
      src="//www.willmaster.com/library/images/ImageClickSelects/sanddollar.jpg"
      style="
        border: none;
        height: 120px;
        width: 94px;
        cursor: pointer;
        margin: 0 5px 0 5px;
      "
      alt="Sand dollar design"
    />
    <img
      onclick="SelectADropdownItem('design-dropdown','Sandria')"
      src="//www.willmaster.com/library/images/ImageClickSelects/sandria.jpg"
      style="
        border: none;
        height: 120px;
        width: 94px;
        cursor: pointer;
        margin: 0 5px 0 5px;
      "
      alt="Sandria design"
    />
    <img
      onclick="SelectADropdownItem('design-dropdown','Blue Wheel')"
      src="//www.willmaster.com/library/images/ImageClickSelects/wheel.jpg"
      style="
        border: none;
        height: 120px;
        width: 94px;
        cursor: pointer;
        margin: 0 5px 0 5px;
      "
      alt="Blue wheel design"
    />

    <select id="design-dropdown">
      <option>Select here or click a pattern above.</option>
      <option value="Fleur">Fleur</option>
      <option value="Nine Patch">Nine Patch</option>
      <option value="Pink Gate">Pink Gate</option>
      <option value="Sand Dollar">Sand Dollar</option>
      <option value="Sandria">Sandria</option>
      <option value="Blue Wheel">Blue Wheel</option>
    </select>

  </body>
</html>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/529547.html

標籤：javascripthtmljQuerycss点击

上一篇：如何在矩形div上創建漸變，并在相反方向上以45度角重復線？

下一篇：Seabornset_style()正在更改軸背景顏色和圖形背景顏色