Tengo este código a continuación en este momento y quiero mostrar el año 2018 de ID de div de manera diferente según el valor que tenga el control deslizante. Entonces, para comenzar, el año de identificación de div es 2018 si valor = 0 y luego si valor = 1 quiero que sea 2019 y así sucesivamente. ¿Alguna idea de como hacerlo? ¿Puedo agregarlo a la declaración if usando el div según el control deslizante en el que está la declaración if?
<body> <style> .map-overlay { font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif; position: absolute; width: 25%; top: 0; left: 0; padding: 10px; } .map-overlay .map-overlay-inner { background-color: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); border-radius: 3px; padding: 10px; margin-bottom: 10px; } .map-overlay h2 { line-height: 24px; display: block; margin: 0 0 10px; } .map-overlay .legend .bar { height: 10px; width: 100%; background: linear-gradient(to right, #fca107, #7f3121); } .map-overlay input { background-color: transparent; display: inline-block; width: 100%; position: relative; margin: 0; cursor: ew-resize; } </style> <div id="map"></div> <div class="map-overlay top"> <div class="map-overlay-inner"> <h2>Year</h2> <div id="year">2018</div> <input id="slider" type="range" min="0" max="3" step="1" value="0"> </div> <div class="map-overlay-inner"> <div id="legend" class="legend"> <div class="bar"></div> <div></div> </div> </div> </div> <script> mapboxgl.accessToken = 'pk....'; const map = new mapboxgl.Map({ container: 'map', // container ID style: 'mapbox://styles/user/cl38v9w2w000g14p8sd5cqqqp', // style URL center: [-105.28461151261762, 40.005493336611714], // starting position [lng, lat] zoom: 13 // starting zoom }); map.on('load', () => { slider.oninput = function() { year.innerHTML = slider.value; if (slider.value == 0) { map.setStyle('mapbox://styles/user/cl38v9w2w000g14p8sd5cqqqp') } else if (slider.value == 1) { map.setStyle('mapbox://styles/mapbox/streets-v11') } else if (slider.value == 2) { map.setStyle('mapbox://styles/mapbox/outdoors-v11') } else if (slider.value == 3) { map.setStyle('mapbox://styles/mapbox/light-v10') } } }); </script> </body>Solo asegúrese de que sus divs en .holder estén en orden. Me refiero a esto:
<div class="holder"> <div>2018</div> <div>2019</div> <div>2020</div> <div>2021</div> </div> const slider = document.getElementById("slider"); const year = document.getElementById("year"); // function to make visible the selected value's div const show = (i) => (document.querySelectorAll(".holder > div")[i].style.display = "block"); // makes visible the default selected value // you can change defalut selected value in your html: // <input id="slider" ... value="0" /> show(parseInt(slider.value)); slider.oninput = function() { // makes all divs hidden each time the value changes [...document.querySelectorAll(".holder > div")].forEach( (i) => (i.style.display = "none") ); const val = parseInt(slider.value); // makes visible the selected value's div show(val); if (val == 0) { year.innerHTML = "2018"; } else if (val === 1) { year.innerHTML = "2019"; } else if (val === 2) { year.innerHTML = "2020"; } else if (val === 3) { year.innerHTML = "2021"; } }; .map-overlay { font: 12px/20px "Helvetica Neue", Arial, Helvetica, sans-serif; position: absolute; width: 25%; top: 0; left: 0; padding: 10px; } .map-overlay .map-overlay-inner { background-color: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); border-radius: 3px; padding: 10px; margin-bottom: 10px; } .map-overlay h2 { line-height: 24px; display: block; margin: 0 0 10px; } .map-overlay .legend .bar { height: 10px; width: 100%; background: linear-gradient(to right, #fca107, #7f3121); } .map-overlay input { background-color: transparent; display: inline-block; width: 100%; position: relative; margin: 0; cursor: ew-resize; } /* makes all divs hidden by default */ .holder>div { display: none; } <div id="map"></div> <div class="map-overlay top"> <div class="map-overlay-inner"> <h2>Year</h2> <div id="year">2018</div> <input id="slider" type="range" min="0" max="3" step="1" value="0" /> </div> <div class="holder"> <div class="map-overlay-inner"> <div class="legend"> <h2>2018</h2> <p>your content here 1</p> </div> </div> <div class="map-overlay-inner"> <div class="legend"> <h2>2019</h2> <p>your content here 2</p> </div> </div> <div class="map-overlay-inner"> <div class="legend"> <h2>2020</h2> <p>your content here 3</p> </div> </div> <div class="map-overlay-inner"> <div class="legend"> <h2>2021</h2> <p>your content here 4</p> </div> </div> </div> </div>