Question

我有这个对象，我想在创建的选项中显示键，并在.info <p>标记中显示值。然后，当我使用addEventListener更改城市时，我想更改信息文本。

我的问题是，是否可以在info中使用for(const [city, info] of entries)中的addEventListener function？我试图将eventListener放在for循环中，但是效果不佳。但是我可以通过某种方式将信息传递给另一个功能吗？还是只是循环键，然后对addEventListener函数中的值再循环一次更好？

let citiesWithInfo = {"New York": 'The biggest city in the world.',
    "Los Angeles": 'Home of the Hollywood sign.',
    "Maui": 'A city on the beautiful island of Hawaii.',
    "Vancover": 'It\'s a city where it rains alot. And I mean alot.',
    "Miami": 'The samba city of the world.'
};

const cityWithInfoPrompt = document.querySelector('#cities-with-info');
const entries = Object.entries(citiesWithInfo);

for(const [city, info] of entries) {
    let optionCity = document.createElement("option");
    optionCity.textContent = city;
    optionCity.value = city;
    cityWithInfoPrompt.appendChild(optionCity);

    let currentCity = cityWithInfoPrompt.options[cityWithInfoPrompt.selectedIndex];
    if(currentCity.textContent == city) {
        document.querySelector(".info").textContent = info;
    }
}

<body>
    <select name="cities-with-info" id="cities-with-info"></select>
    <p>Info: <span class="info"></span></p>
    <script src="eventTarget.js"></script>
</body>

Answer 1

您可以将事件附加到循环之外，在此循环中，您可以在所选值和对象属性名称之间匹配该值：

let citiesWithInfo = {"New York": 'The biggest city in the world.',
    "Los Angeles": 'Home of the Hollywood sign.',
    "Maui": 'A city on the beautiful island of Hawaii.',
    "Vancover": 'It\'s a city where it rains alot. And I mean alot.',
    "Miami": 'The samba city of the world.'
};

const cityWithInfoPrompt = document.querySelector('#cities-with-info');
const entries = Object.entries(citiesWithInfo);

for(const [city, info] of entries) {
    let optionCity = document.createElement("option");
    optionCity.textContent = city;
    optionCity.value = city;
    cityWithInfoPrompt.appendChild(optionCity); 
}

cityWithInfoPrompt.addEventListener('change', function(){
  let currentCity = this.options[this.selectedIndex].value;
  document.querySelector(".info").textContent = citiesWithInfo[currentCity];
});
// On page load
// Create event
var event = new Event('change');
// Dispatch the event
cityWithInfoPrompt.dispatchEvent(event);

<body>
    <select name="cities-with-info" id="cities-with-info"></select>
    <p>Info: <span class="info"></span></p>
    <script src="eventTarget.js"></script>
</body>

使用Arrow Function（() => {}）和Event.target

的解决方案

let citiesWithInfo = {"New York": 'The biggest city in the world.',
    "Los Angeles": 'Home of the Hollywood sign.',
    "Maui": 'A city on the beautiful island of Hawaii.',
    "Vancover": 'It\'s a city where it rains alot. And I mean alot.',
    "Miami": 'The samba city of the world.'
};

const cityWithInfoPrompt = document.querySelector('#cities-with-info');
const entries = Object.entries(citiesWithInfo);

for(const [city, info] of entries) {
    let optionCity = document.createElement("option");
    optionCity.textContent = city;
    optionCity.value = city;
    cityWithInfoPrompt.appendChild(optionCity); 
}

cityWithInfoPrompt.addEventListener('change', () => {
  let currentCity = event.target.value;
  document.querySelector(".info").textContent = citiesWithInfo[currentCity];
});
// On page load
// Create event
var event = new Event('change');
// Dispatch the event
cityWithInfoPrompt.dispatchEvent(event);

<body>
    <select name="cities-with-info" id="cities-with-info"></select>
    <p>Info: <span class="info"></span></p>
    <script src="eventTarget.js"></script>
</body>

Answer 2

我将此代码用于addEventListener，以将信息从对象获取到信息HTML标记。

cityWithInfoPrompt.addEventListener("change", (e) => {
    let selectedCity = e.target.value
    for(const [city, info] of entries) {
        if(selectedCity == city) {
            document.querySelector(".info").textContent = info;
        }
    }
});

Object.entries和addEventListener

2 个答案: