Estoy creando un sitio web utilizando un sitio web y buscando alternar tres valores de texto con un clic de un botón. Esto es para alternar entre los valores USD y GBP. Tengo el siguiente código para alternar un fragmento de texto, pero no tengo claro cómo agregar otros dos fragmentos de texto para las tarifas estándar y premium.
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <p><button onclick="myFunction()">USD - GBP</button></p> <div id="myDIV">Basic Fee $50</div> <script> function myFunction() { var x = document.getElementById("myDIV"); if (x.innerHTML === "Basic Fee $50") { x.innerHTML = "Basic Fee £60"; } else { x.innerHTML = "Basic Fee $50"; } } </script> </body> </html>Espero que alguien esté dispuesto a ayudar.
Suponiendo que no tiene una lógica del lado del servidor para almacenar los precios y recuperarlos dinámicamente, entonces la forma más simple y extensible de lograr esto sería llenar el DOM con todos los valores de moneda. Puede mostrar la moneda predeterminada y ocultar la otra. Luego, al hacer clic en el botón, puede toggleClass() para alternar según sea necesario.
jQuery($ => { let $currencyValues = $('.currency-value'); $('.currency-toggle').on('click', () => { $currencyValues.toggleClass('hidden'); }); }); /* // the same in plain JS: document.addEventListener('DOMContentLoaded', () => { let currencyValues = document.querySelectorAll('.currency-value'); document.querySelector('.currency-toggle').addEventListener('click', () => { currencyValues.forEach(el => el.classList.toggle('hidden')); }); }); */ .type { display: inline-block; min-width: 100px; } .currency-value.hidden { display: none; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <p><button class="currency-toggle">USD - GBP</button></p> <div> <span class="type">Basic Fee</span> <span class="currency-value usd">$50</span> <span class="currency-value gbp hidden">£60</span> </div> <div> <span class="type">Handling Fee</span> <span class="currency-value usd">$75</span> <span class="currency-value gbp hidden">£100</span> </div> <div> <span class="type">Another Fee</span> <span class="currency-value usd">$100</span> <span class="currency-value gbp hidden">£125</span> </div>