如何使用 vanilla JavaScript 將事件目標中的數據集屬性傳遞給 function 參數

Question

我有一個 function，它基於作為參數傳遞的 object 動態創建數據可視化。

我將對象的名稱存儲在事件目標的數據屬性中。 然后我根據該屬性設置 function 參數。

這是一個例子：

  <div>
      <button data-object="countries">click me</button>
    </div>

    <script>
      const countries = [
        { location: "United States", type: "country" },
        { location: "Canada", type: "country" },
      ];
      let button = document.querySelector("button");
      console.log(countries);

      const countriesFunction = (data) => {
        console.log(event.target.dataset.object);
      };

      button.addEventListener("click", (event) => {
        countriesFunction(event.target.dataset.object);
      });

function“countriesFunction”無法將事件目標的數據屬性識別為預定義的 object。 而是將其視為字符串，在我的情況下會引發錯誤。

我試過 JSON 解析，但我得到一個解析錯誤。

有沒有辦法將目標的數據屬性值與 object 聯系起來？

Answer 1

data-object包含文本countries 。 要將該值用作變量，您需要使用eval ，這是不可取的。

而是將您的countries地區放入其自己的 object 中，並將數據集用作 object 路徑的一部分。 您需要使用方括號表示法來進行 object 成員訪問。 這允許您使用任何表達式（如變量分辨率）作為 object 成員。

  const myData = {
   countries: [
    { location: "United States", type: "country" },
    { location: "Canada", type: "country" },
   ]
  };

  const countriesFunction = (data) => {
    console.log(myData[data]);
  };

  button.addEventListener("click", (event) => {
    countriesFunction(event.target.dataset.object);
  });