在多模式彈出窗口中更改默認單選按鈕選中屬性

Question

默認情況下，Woocommerce 為我的產品自定義布局提供了選項。 單擊如下按鈕

我得到一個帶有選項默認產品的彈出式模式

然而，無論網絡用戶點擊大尺寸，默認選擇始終是小尺寸。 我附上了演示代碼來展示問題，我將是解決方案。 我想使用 JS 刪除頁面加載時檢查的默認值。 然后單擊按鈕，大小將通過使用 html 上的數據鍵確定主餐選擇。

問題：我的大按鈕單擊有效，但小按鈕單擊不會更改選中的值。 您的幫助或不同的看法將不勝感激。

 window.onload = removePreSelection(); const clickBtns = Array.from(document.querySelectorAll('.defaultbtn')); clickBtns.forEach(clickBtn => clickBtn.addEventListener('click', clickedBtnSelect)); //Remove the default selection of radio buttons on page. function removePreSelection() { const inputs = document.querySelectorAll('input[name=attribute_pa_sizes]:checked'); for (let i = 0; i < inputs.length; i++) { const element = inputs[i]; element.removeAttribute("checked"); } } //Filter the values of the clicked button. function clickedBtnSelect(e) { removePreSelection(); const bentoSize = e.target.dataset.bento; const bentoModal = e.target.dataset.target.replace(/([#]+)/gi, ''); const modalInputValue = document.querySelector('input[value=' + bentoSize + ']'); console.log(modalInputValue); //set the attribute to checked. modalInputValue.setAttribute("checked", "checked");; }

 <div class="show-pricing"> <p class="variable-pricing"> <span>Large: 27500</span> <button class="btn defaultbtn" data-target="#myModal1900" data-toggle="modal" data-bento="large" type="button">Large</button> </p> <p class="variable-pricing"> <span>Small: 23000</span> <button class="btn defaultbtn" data-target="#myModal1908" data-toggle="modal" data-bento="small" type="button">Small</button> </p> <!-- Modal --> <div aria-labelledby="myModalLabel" class="modal fade" id="myModal1900" role="dialog" tabindex="-1"> <div class="variations"> <div class="col-md-4"> <h3 class="variations-options-head">Large Modal selected</h3> <div class="value"> <fieldset> <p> <input id="pa_sizes" name="attribute_pa_sizes" type="radio" value="large"> <span class="radio-span">Large</span> </p> <p> <input checked="checked" id="pa_sizes" name="attribute_pa_sizes" type="radio" value="small"> <span class="radio-span">Small</span> </p> </fieldset> </div> </div> </div> </div> <!-- Modal 2 --> <div aria-labelledby="myModalLabel" class="modal fade" id="myModal1908" role="dialog" tabindex="-1"> <div class="variations"> <div class="col-md-4"> <h3 class="variations-options-head">Small modal selected</h3> <div class="value"> <fieldset> <p> <input id="pa_sizes" name="attribute_pa_sizes" type="radio" value="large"> <span class="radio-span">Large</span> </p> <p> <input checked="checked" id="pa_sizes" name="attribute_pa_sizes" type="radio" value="small"> <span class="radio-span">Small</span> </p> </fieldset> </div> </div> </div> </div> </div>

Answer 1

試試這個用 jQuery 制作的工作版本，更緊湊和高效：

 (function($){ // variables initialization var a = 'button[data-bento^="small"]', b = 'button[data-bento^="large"]', c = 'input[value^="small"]', d = 'input[value^="large"]'; $(a).click(function(){ var e = $(this).attr('data-target') + ' ' + c; console.log($(this).attr('data-target')); $(e).prop('checked', true); }); $(b).click(function(){ var f = $(this).attr('data-target') + ' ' + d; console.log($(this).attr('data-target')); $(f).prop('checked', true); }); })(jQuery);

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="show-pricing"> <p class="variable-pricing"> <span>Large: 27500</span> <button class="btn defaultbtn" data-target="#myModal1900" data-toggle="modal" data-bento="large" type="button">Large</button> </p> <p class="variable-pricing"> <span>Small: 23000</span> <button class="btn defaultbtn" data-target="#myModal1908" data-toggle="modal" data-bento="small" type="button">Small</button> </p> <!-- Modal --> <div aria-labelledby="myModalLabel" class="modal fade" id="myModal1900" role="dialog" tabindex="-1"> <div class="variations"> <div class="col-md-4"> <h3 class="variations-options-head">Large Modal selected</h3> <div class="value"> <fieldset> <p> <input id="pa_sizes" name="attribute_pa_sizes" type="radio" value="large"> <span class="radio-span">Large</span> </p> <p> <input checked="checked" id="pa_sizes" name="attribute_pa_sizes" type="radio" value="small"> <span class="radio-span">Small</span> </p> </fieldset> </div> </div> </div> </div> <!-- Modal 2 --> <div aria-labelledby="myModalLabel" class="modal fade" id="myModal1908" role="dialog" tabindex="-1"> <div class="variations"> <div class="col-md-4"> <h3 class="variations-options-head">Small modal selected</h3> <div class="value"> <fieldset> <p> <input id="pa_sizes" name="attribute_pa_sizes" type="radio" value="large"> <span class="radio-span">Large</span> </p> <p> <input checked="checked" id="pa_sizes" name="attribute_pa_sizes" type="radio" value="small"> <span class="radio-span">Small</span> </p> </fieldset> </div> </div> </div> </div> </div>

你可以直接點擊“運行代碼片段”按鈕來查看它的運行情況……

測試和工作。

---

您還可以將其嵌入到掛鈎函數中，如下所示：

add_filter( 'wp_footer','custom_product_title_script' );
function custom_product_title_script(){
    if( ! is_checkout() || is_admin() ) return; // only on single product pages
    ?>
        <script type="text/javascript">
        // HERE goes the jQuery script
        </script>
    <?php
}

代碼位於您的活動子主題（或主題）的 function.php 文件中……