嘗試使用 getElementsByClassName 填充單選按鈕中的值時出現問題

Question

請。

在我的頁面上有一個容器，里面裝滿了鏈接（“link_storage”），我的彈出窗口在其中獲取“值”的鏈接（“下面的代碼部分”）。 如您所見，它與 ID 相關聯，但現在我需要以某種方式切換到 class 名稱（例如從 old_id_1 到 link1_cont）。

我試圖切換到 .getElementsByClassName() 但沒有成功。

 function onLinkClickCallBack(event) { let disableClassName = 'disabled'; let linkElement = document.getElementById(event.target.id); // Don't continue if button is disabled if (linkElement.classList.contains(disableClassName)) { return false; } } let inputs = document.getElementsByName('productId'); for (i = 0; i < inputs.length; i++) { if (inputs[i].checked) { let value = inputs[i].value; document.location.href = document.getElementById(value).href; } }

 <div class="link_storage"> <span class="link1_cont" id="old_id_1" style="display: none" href="link1"></span> <span class="link2_cont" id="old_id_2" style="display: none" href="link2"></span> <span class="link3_cont" id="old_id_3" style="display: none" href="link3"></span> </div> <fieldset> <label> <input type="radio" name="productId" id="radio4" value="zone_link_1" checked> <h3>text<br><small>text</small></h3> </label> <label> <input type="radio" name="productId" id="radio5" value="zone_link_2"> <h3>text<br><small>text</small></h3> </label> <label> <input type="radio" name="productId" id="radio6" value="zone_link_3"> <h3>text<br><small>text</small></h3> </label> </fieldset>

Answer 1

刪除zone_並將_cont添加到該值，並將其用作 link_storage 中元素的link_storage名稱。

 function onLinkClickCallBack(event) { let disableClassName = 'disabled'; let linkElement = document.getElementById(event.target.id); // Don't continue if button is disabled if (linkElement.classList.contains(disableClassName)) { return false; } } let selectedInput = document.querySelector(".productId:checked"); if (selectedInput) { let linkClass = selectedInput.value.replace("zone_") + "_cont"; document.location.href = document.querySelector(`.${linkClass}`).href;

 <div class="link_storage"> <span class="link1_cont" id="old_id_1" style="display: none" href="link1"></span> <span class="link2_cont" id="old_id_2" style="display: none" href="link2"></span> <span class="link3_cont" id="old_id_3" style="display: none" href="link3"></span> </div> <fieldset> <label> <input type="radio" name="productId" id="radio4" value="zone_link_1" checked> <h3>text<br><small>text</small></h3> </label> <label> <input type="radio" name="productId" id="radio5" value="zone_link_2"> <h3>text<br><small>text</small></h3> </label> <label> <input type="radio" name="productId" id="radio6" value="zone_link_3"> <h3>text<br><small>text</small></h3> </label> </fieldset>