您将如何使用 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("hide-show") 更改为 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>

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

How would you use JavaScript to create a toggle button that unhides/ hides content?

html

javascript

css

button

toggle