javascript - 如何在元素单击时获取对象属性？

Question

我正在构建一个用于练习的天气应用程序。我到了那个地步，我必须使用来自 JSON 对象的数据创建一个自动完成输入字段。当有人进行输入时，它会显示匹配的数据，但在单击时我想从对象中获取两个属性。我需要从 JSON 对象获取经度和纬度属性以发出 API 请求以返回包含天气数据的对象。内容显示正确，但我无法使 onClick 事件监听器工作。我尝试了非常不同的事情但失败了，要么是范围问题，要么是其他原因。这是我的第一个项目之一，我现在正处于垮台状态。请帮我。 :)

附言您可以在此链接上找到它:https://objective-edison-1d6da6.netlify.com/

// Testing
const search = document.querySelector('#search');
const matchList = document.querySelector('#match-list');
let states;

// Get states
const getStates = async () => {
  const res = await fetch('../data/bg.json');
  states = await res.json();
};

// Filter states
const searchStates = searchText => {
  // Get matches to current text input
  let matches = states.filter(state => {
    const regex = new RegExp(`^${searchText}`, 'gi');

    return state.city.match(regex);
  });

  // Clear when input or matches are empty
  if (searchText.length === 0) {
    matches = [];
    matchList.innerHTML = '';
  }

  outputHtml(matches);
};

// Show results in HTML
const outputHtml = matches => {
  if (matches.length > 0) {
    const html = matches
      .map(
        match => `<div class="card match card-body mb-1">
    <h4>${match.city} 
    <span class="text-primary">${match.country}</span></h4>
    <small>Lat: ${match.lat} / Long: ${match.lng}</small>
   </div>`
      )
      .join('');
    matchList.innerHTML = html;
    document.querySelector('.match').addEventListener('click', function() {});
    //Wconsole.log(matches);
    //let test = document.querySelectorAll('#match-list .card');
    //const values = matches.values(city);
  }
};

window.addEventListener('DOMContentLoaded', getStates);
search.addEventListener('input', () => searchStates(search.value));

Answer 1

如果我理解正确，您正在尝试访问点击匹配项的 lat 和 lng 值，如果是这种情况，这是一种方法它:

const outputHtml = matches => {
  if (matches.length > 0) {
    const html = matches
      .map(
        match => `<div class="card match card-body mb-1" data-lat="`${match.lat}" data-lng="`${match.lng}">
    <h4>${match.city} 
    <span class="text-primary">${match.country}</span></h4>
    <small>Lat: ${match.lat} / Long: ${match.lng}</small>
   </div>`
      )
      .join('');
    matchList.innerHTML = html;
    document.querySelectorAll('.match').forEach(matchElm => {
      matchElm.addEventListener('click', function(event) {
         const { currentTarget } = event;
         const { lat, lng } = currentTarget.dataset;
      });
    });
  }
};

我使用了 data-lat 和 data-lng 属性将所需的值存储在元素的 dataset 中，并且我已经使用 document.querySelectorAll('.match') 获取所有具有类 match 的元素，而不仅仅是第一个元素。