Question

首先，我不想编辑html，而是使用JavaScript / jQuery来实现这一点。

默认选择（选中）一个输入，在此示例中为“快速运输”。然后从父对象中克隆/复制所有html，其中＆lt; li>持有输入。我不需要＆lt; li>只复制了其中的输入。

然后将其放在#dumpinfohere＆lt; div＆gt;。

我可以管理到这一点，但是当我然后在两个单选按钮之间切换时，或者如果我添加其他单选按钮，然后检查输入的完整html加上它的＆lt; li>替换了#dumpinfohere部分。

这是我尝试实现此目的的代码：

JSFiddle. You can view what I've done here.

HTML

<ul id="shipping_method">
  <li>
    <input type="radio" name="shipping_method[0]" data-index="0" id="shipping_method_0_betrs_shipping_12-1" value="betrs_shipping_12-1" class="shipping_method "> Free Shipping 
  </li>
  <li>
    <input type="radio" name="shipping_method[0]" data-index="0" id="shipping_method_0_betrs_shipping_12-2" value="betrs_shipping_12-2" class="shipping_method" checked="checked"> Express Shipping
  </li>
</ul>

的Javascript

jQuery(document).ready(function($){
  var changeShip = function() {
    $('#shipping_method input:checked')
        .parent()
      .clone()
      .appendTo(".woocommerce-billing-fields #dumpinfohere");
  };

  $('#shipping_method input').change(changeShip);

  changeShip();
});

CSS

#shipping_method { 
  float: left; width: 100%;
  list-style: none; 
  padding: 0px;
}
#shipping_method li {
  /* display: none; */
  float: left; width: 100%;
  background: #ccc;
  padding: 5px 10px;
}
#shipping_method .red { background: red; }

.woocommerce-billing-fields { 
  background: #000; color: #fff;
  width: 100%; height: 300px;
  padding: 5px 10px;
  float: left;
}

.woocommerce-billing-fields li { padding: 10px 0px; color: #e024a7; list-style: none; }
.woocommerce-billing-fields li input { display: none; }

但是你可以看到你是否在两个单选按钮之间切换它不会改变/替换文本而只是添加它？

Answer 1

你只需要添加

$("#dumpinfohere").html('');

之后

var changeShip = function() {

所以你的最终代码是：

jQuery(document).ready(function($){
  var changeShip = function() {
    $("#dumpinfohere").html('');
    $('#shipping_method input:checked')
        .parent()
      .clone()
      .appendTo(".woocommerce-billing-fields #dumpinfohere");
  };

  $('#shipping_method input').change(changeShip);

  changeShip();
});

基本上，您需要在添加任何新文本之前清空容器。

克隆并更改新的电台检查

1 个答案: