您将如何使用JavaScript创建一个取消隐藏/隐藏内容的切换按钮

Question

我试图隐藏单击按钮时显示的内容。

这是我的起始HTML:

<div class="sunrise-section" id="hide-show">
<h3>SUNRISE</h3>
<p class="sunrise">5:40 A.M.</p>
</div>
<div class="sunset-section" id="hide-show">
<h3>SUNSET</h3>
<p class="sunset">8:05 P.M.</p>
</div>
<div class="navbar-bottom">
<button onclick="onClick"><img src="https://image.flaticon.com/icons/svg/892/892499.svg" alt="click for details" height="18px" id="navbar-bottom-button"></button>
</div>

这是我的起始JavaScript(onClick函数是最后一个；我包含了显示上下文的所有内容(：

window.addEventListener('load', ()=> {
let long;
let lat;
let locationTimeZone = document.querySelector('.location-timezone');
let temperatureDegree = document.querySelector('.temperature-degree');
let humidity = document.querySelector('.humidity');
let todayDate = document.querySelector('.today-date');
let windSpeed = document.querySelector('.wind-speed');
let visibility = document.querySelector('.visibility');
let pressure = document.querySelector('.pressure');
let sunrise = document.querySelector('.sunrise');
let sunset = document.querySelector('.sunset');
let myDate = new Date();
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(position => {
long = position.coords.longitude;
lat = position.coords.latitude;
const proxy = 'https://cors-anywhere.herokuapp.com/';
const api = `${proxy}https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${long}&appid=d5f88bf8e740a9d82677f46f346f0a33&units=Imperial`;

fetch(api) 
.then(response => {
return response.json();
})
.then(data => {
console.log(data);
// Set Sunrise 
let sunriseDate = new Date(data.sys.sunrise * 1000);
let sunriseHours = sunriseDate.getHours();
let sunriseMinutes = sunriseDate.getMinutes();

// Set Sunset 
let sunsetDate = new Date(data.sys.sunset * 1000);
let sunsetHours = sunsetDate.getHours();
let sunsetMinutes = sunsetDate.getMinutes();
// Add 0 Before Minutes if Less than 10
if(sunsetMinutes.toString().length < 2)
sunsetMinutes = "0" + sunsetMinutes
if(sunriseMinutes.toString().length < 2)
sunriseMinutes = "0" + sunsetMinutes 
// Set DOM Elements from the API 
locationTimeZone.textContent = data.name;
temperatureDegree.textContent = Math.round(data.main.temp);
humidity.textContent = data.main.humidity + '%';
todayDate.textContent = myDate.format('l F d') + 'th, ' + myDate.format('Y');
windSpeed.textContent = data.wind.speed + ' MPH';
visibility.textContent = Math.round(data.visibility / 1609) + '+ Mi';
pressure.textContent = data.main.pressure + ' mb';
sunrise.textContent = sunriseHours + ":" + sunriseMinutes + " A.M.";
sunset.textContent = (sunsetHours - 12) + ":" + sunsetMinutes + " P.M.";
// Set Icon
let iconCode = data.weather[0].icon;
let iconUrl = "http://openweathermap.org/img/wn/" + iconCode + "@2x.png";
$('#weather-icons').attr('src', iconUrl);
// Toggle Hide / Unhide Button 
function onClick() {let x = document.getElementById("hide-show");
if (x.style.display === "none") {
x.style.display = "block";} 
else {x.style.display = "none";}
}

} )
});
}
}); 

我已尝试将.getElementById("隐藏显示"(更改为document.querySelectorAll("[id=hide show]"(，但没有任何更改。

我感谢任何能帮助我更好地理解这个问题的意见！

Answer 1

我认为，如果您的javascript位于单独的文件中，则永远不会调用onClick函数。这里有一种简单的方法，它被称为事件委派，在一个循环中有一个侦听器比有多个要好。

let elements = document.querySelectorAll('.hide-show');
document.addEventListener('click', e => {
if (e.target.closest('button')) {
elements.forEach(el => {
el.classList.contains('hidden') ? el.classList.remove('hidden') : el.classList.add('hidden');
})
}
})

.hidden {
display: none
}

<div class="sunrise-section hide-show" id="one">
<h3>SUNRISE</h3>
<p class="sunrise">5:40 A.M.</p>
</div>
<div class="sunset-section hide-show" id="two">
<h3>SUNSET</h3>
<p class="sunset">8:05 P.M.</p>
</div>
<div class="navbar-bottom">
<button><img src="https://image.flaticon.com/icons/svg/892/892499.svg" alt="click for details" height="18px" id="navbar-bottom-button"></button>
</div>