我繪制了一幅圖像。默認情況下& quot填充& quot是紅色的& quot不透明度= 0 & quot。我正在訪問一個api來獲取以下json:

{
"documents": [
    {
        "_id": "646fd0fbe269fac6c8374c9e",
        "id": "gid://Product/7592907636921",
        "status": false,
        "url": "https://www.store.com/products/link1"
    }
]
}

如果url與我映射的& quothref & quot并且狀態為假，則不透明度變為1，從而該框被標記為紅色。如果可能的話，不要用紅色完全覆蓋它，而是用x劃掉正方形。

<style>
.table_number{
fill: red;
opacity: 0;
}
</style>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 540 159">
<image width="540" height="159" xlink:href="https://cdn.shopify.com/s/files/1/0573/4478/6617/files/tables_number.png"></image>
<a xlink:href="https://www.store.com/products/link1">
    <rect class="table_number" x="46" y="54" width="86" height="70"></rect>
</a>
<a xlink:href="https://www.store.com/products/link2">
    <rect class="table_number" x="171" y="56" width="84" height="69"></rect>
</a>
<a xlink:href="https://www.store.com/products/link3">
    <rect class="table_number" x="292" y="59" width="82" height="65"></rect>
</a>
<a xlink:href="https://www.store.com/products/link4">
    <rect class="table_number" x="408" y="59" width="85" height="70"></rect>
</a>
</svg>
<script>
getData();

async function getData(){
const response= await fetch('myurl')
console.log(response);

//Help here

}

這里:

我變了& lta xlink:href = & quot；"到& lta href = & quot"因為xlink:href已被此鏈接棄用。它的優點是現在我們可以像這個文檔一樣使用querySelectorAll。[href = & quot；一些網址& quot]& quot；);獲取目標元素 在我們得到目標& lta & gt元素，我們將它的子元素作為目標，在本例中是& ltrect & gt使用item . query selector all(& quot；:范圍& gtrect & quot);。然后，使用item . class list . add(& quot；紅色& quot).red是一個將不透明度設置為1的類，這樣盒子就會變成紅色。

<style>
  .table_number {
    fill: red;
   opacity: 0;
  }
  
  .red {
    opacity: 1;
  }
  
</style>

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 540 159">
  <image width="540" height="159" xlink:>       </image>
  <a >
    <rect class="table_number" x="46" y="54" width="86" height="70"></rect>
  </a>
  <a >
    <rect class="table_number" x="171" y="56" width="84" height="69"></rect>
  </a>
  <a >
    <rect class="table_number" x="292" y="59" width="82" height="65"></rect>
  </a>
  <a >
    <rect class="table_number" x="408" y="59" width="85" height="70"></rect>
  </a>
</svg>

<script>
  getData();

  async function getData(){
    // const response= await fetch('myurl')
    // console.log(response);

    // mock response variable
    const response = {
      "documents": [
        {
          "_id": "646fd0fbe269fac6c8374c9e",
          "id": "gid://Product/7592907636921",
          "status": false,
          "url": "https://www.store.com/products/link1"
        },
      ]
    }

    // Help here
    response.documents.filter(d => !d.status).map(data => {
      // Find <a> elements with the href attribute equals data url
      const ALinks = document.querySelectorAll(`[href="${data.url}"]`);
      ALinks.forEach((item) => {
        let allChildren = item.querySelectorAll(":scope > rect");
         allChildren.forEach((item) => item.classList.add("red"));
      });
    })
  }
</script>