Question

我正在努力让客户在WooCommerce中自定义他们想要的订单。他们将有几个文本字段，他们可以输入他们的内容，然后能够选择他们想要使用的字体。

内容将显示在页面上的DIV中，以便客户在点击“添加到购物车”之前可以看到它的外观。

文本字段和字体选择将成为订单的一部分。

我知道如何使用jQuery在页面上显示单行文本，但是我在多行文本中摸不着头脑并更改显示的字体系列。

关于如何做到这一点的任何想法？

我勾画了我的代码here：

<form id="TheForm">

Line 1: <input type="text" name="Line1"><br>
Line 2: <input type="text" name="Line2"><br>
Line 3: <input type="text" name="Line2"><br>
Line 4: <input type="text" name="Line2"><br>
<br>
<br>
<input type="radio" value="Arial" id="font"><span style="font-family:arial">Arial</span><br>
<input type="radio" value="Verdana" id="font"><span style="font-family:Verdana">Verdana</span><br>
<input type="radio" value="Times New Roman" id="font"><span style="font-family:Times New Roman">Times New Roman</span><br>
<br/>
    <input id="submit" value="Submit" type="button" />
</form>
<br>
<br>

<div style="width:300px;height:100px;border:1px solid #000;">
Line 1 Text Here<br>
Line 2 Text Here<br>
Line 3 Text Here<br>
Line 4 Text Here
</div>

Answer 1

请参阅下面的代码段。基本上，脚本会监听表单上的更改。发生更改时，预览div将使用文本框中的值和所选radio按钮中的font-family进行更新。我修改了您的HTML以提供更好的功能，例如label已连接到input和独占radio按钮（它们缺少name属性）。

这个例子可以进一步完善，但应该是一个不错的起点。我调整了this nice function by Quentin来获取radio值。

＆＃13;

var theForm = document.querySelector('#TheForm');
var lineInputs = document.querySelectorAll('.line');
var preview = document.querySelector('#preview');

theForm.addEventListener( 'change', updatePreview);
updatePreview();

function updatePreview() {
      preview.innerHTML = '';
      
      for (var i = 0, l = lineInputs.length; i < l; i++) {
        preview.innerHTML += lineInputs[i].value;
        
        i !== l - 1 ? preview.innerHTML += '<br />' : '';
      }
  
    function getFont(radio_group) {
      for (var i = 0, l = radio_group.length; i < l; i++) {
          var button = radio_group[i];
          if (button.checked) {
              return button;
          }
      }
      return undefined;
    }
    var checkedButton = getFont(theForm.elements.font);
    if (checkedButton) {
        preview.style.fontFamily = checkedButton.value;
    }
}

＆＃13;

<form id="TheForm">

<label for="Line1">Line 1: </label><input class="line" type="text" id="Line1" name="Line1" value="Line 1 Text Here"><br>
<label for="Line2">Line 2: </label><input class="line" type="text" id="Line2" name="Line2" value="Line 2 Text Here"><br>
<label for="Line3">Line 3: </label><input class="line" type="text" id="Line3" name="Line3" value="Line 3 Text Here"><br>
<label for="Line4">Line 4: </label><input class="line" type="text" id="Line4" name="Line4" value="Line 4 Text Here"><br>
<br>
<br>
<input type="radio" value="Arial" id="font1" name="font"><label for="font1" style="font-family:arial">Arial</label><br>
<input type="radio" value="Verdana" id="font2" name="font"><label for="font2" style="font-family:Verdana">Verdana</label><br>
<input type="radio" value="Times New Roman" id="font3" name="font"><label for="font3" style="font-family:Times New Roman">Times New Roman</label><br>
<br/>
    <input id="submit" value="Submit" type="button" />
</form>
<br>
<br>

<div id="preview" style="width:300px;height:100px;border:1px solid #000;">
</div>

＆＃13;

在页面上显示多个输入字段，并通过单选按钮更改字体

1 个答案: