更改

Question

默认情况下，Woocommerce为我的产品自定义布局提供了选项。点击下面的按钮

我得到一个带选项的弹出式模态

的默认产品

但是，无论网络用户点击大小，默认选择都是小尺寸。我附上演示代码来展示问题，我的解决方案就是解决方案。我想用JS来删除默认的检查页面加载。然后单击按钮，大小将通过在html上使用数据键确定主餐选择。

问题：我的大按钮单击有效但单击小按钮不会更改选中的值。非常感谢您的帮助或不同的看法。

＆＃13;

＆＃13;

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");;

}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

尝试在jQuery上使用这个工作版本的maid，更紧凑，更高效：

(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文件...