如何使用 javascript 和 sessionStorage 更改显示属性

Question

我正在寻求帮助，使用 javascript 和 sessionStorage 更改 div class 的显示属性。 sessionStorage 变量在控制台中可见，但我一直在更改 CSS。我使用了 getElementByClassName 和 getElementByID，但都不会显示/隐藏块 - 我看到了两个块 - 而不是只有一个块取决于会话存储变量。 欢迎任何线索？

 function setUpPopupRegistrationForm() { $('.js-popup-register-button').on('click', function() { let storage = window.sessionStorage; let selectedRole = this.dataset.role; storage.clear('selectedRole'); storage.setItem('selectedRole', selectedRole); var r1 = document.getElementByClassName("radiocustom")[0]; var r2 = document.getElementByClassName("radiocustom2")[0]; if (selectedRole == "investor-member") { r1.style.display = "block"; r2.style.display = "none"; } else if (selectedRole == "investor") { r1.style.display = "none"; r2.style.display = "block"; } navigateToNextStep(this); }); }

 <div class="form__step js-popup-register-step" data-step="1"> <div class="d-flex flex-column flex-sm-row justify-content-between"> <div class="button button--blue js-popup-register-button" data-role="investor"><span>Guest</span></div> <div class="button js-popup-register-button" data-role="investor-member"><span>Member</span></div> </div> </div> <div class="form__step js-popup-register-step form__step--inactive" data-step="2"> <div class="representation-container"> <div class="radiocustom"> <input type="radio" id="chk_sophisticated" name="investor_type" value="Sophisticated Investor" checked="checked"> <label for="chk_sophisticated"> Sophisticated Investor</label> <br> <input type="radio" id="chk_hnw_individual" name="investor_type" value="High Net Worth Individual"> <label for="chk_hnw_individual"> High Net Worth Individual</label> <br> <input type="radio" id="chk_hnw_investor" name="investor_type" value="High Net Worth Investor"> <label for="chk_hnw_investor"> High Net Worth Company, unincorporated association or trust</label> <br> </div> <div class="radiocustom2"> <input type="radio" id="chk_individual" name="other_type" value="Individual" checked="checked"> <label for="chk_individual"> Individual</label> <br> <input type="radio" id="chk.networker" name="other_type" value="Business Networker"> <label for="chk.networker"> Business Networker</label> <br> <input type="radio" id="chk_corporate" name="other_type" value="Corporate"> <label for="chk_corporate"> Corporate</label> <br> </div> <br> <br> <div class="d-flex flex-column flex-sm-row justify-content-between"> <div class="button js-popup-gateway-button"><span>Confirm</span></div> </div> </div>

Answer 1

这是你应该做的。

document.querySelector(".radiocustom2").style.display = "none";

或者你可以像这样设置你的 r1 。

const r1 = document.querySelector(".radiocustom");

您还应该清除浏览器缓存以清除可能已登录缓存的任何 JavaScript。