Question

这是我的工作代码：

const intro = "you entered the words: ";
const outro = "</br>Thanks";
let input1 = '';
let input2 = '';

$('#inp1, #inp2').on('input', function update(e) {
  if (e.currentTarget.id === 'inp1') {
    input1 = e.currentTarget.value;
  } else {
    input2 = e.currentTarget.value;
  }
  $("#disp1").html(intro + '<br>' + input1 + ' and ' + input2 + outro);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 


<textarea id="inp1" rows="4" cols="50" name="inp1"></textarea></br>
</br>
<textarea id="inp2" rows="4" cols="50" name="inp1"></textarea></br>
</br>


<a id="disp1" target="_blank"> </a>

您可以看到我输入了两个输入，并将它们组合成一个字符串。现在我想将我的代码修改为3或4+个输入

谢谢。

Answer 1

如果我正确理解了您的问题，则您正在尝试泛化您的代码，以便它可以与任意数量的textarea元素一起使用。

要实现这一点，一种可能性是在input事件处理程序中创建一个数组，该数组通过执行以下操作来临时存储文档中每个textarea的有效值：

var array = [];

$('textarea').each(function() {

    var value = $(this).val();

    if(value) {
      array.push(value);
    }
});

有了此数组后，您就可以使用Array#join方法创建一个在每个数组项的值之间包含" and "的字符串：

var displayHTML = intro + '<br>' + array.join(' and ') + outro;

下面是一个代码片段，其中显示了可行的解决方案中的这些想法：

const intro = "you entered the words: ";
const outro = "</br>Thanks";

// Select from all "textarea" elements
$('textarea').on('input', function update(e) {
  
  // This array will store valid values from all textarea's
  var array = [];
  
  $('textarea').each(function() {
    
    // If value of this textarea being iterated is valid, then
    // add to the array
    var value = $(this).val();
    if(value) {
      array.push(value);
    }
  });

  // Create the display html string, using Array#join to create 
  // a string result of each item joined by " and " string  
  var displayHTML = intro + '<br>' + array.join(' and ') + outro;
  
  $("#disp1").html(displayHTML);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 


<a id="disp1" target="_blank"> </a>
</br>
<textarea id="inp1" rows="4" cols="50" name="inp1"></textarea></br>
</br>
<textarea id="inp2" rows="4" cols="50" name="inp1"></textarea></br>
</br>
<textarea rows="4" cols="50"></textarea></br>
</br>
<textarea rows="4" cols="50"></textarea></br>
</br>
<textarea rows="4" cols="50"></textarea></br>
</br>

希望有帮助！

Answer 2

我认为这可以完成工作

const intro = "you entered the words: <br>";
const outro = "<br>Thanks";
let input = '';


$(document).on('input', 'textarea', function update(e) {
  $(this).each(function() {
    input += e.currentTarget.value + ' and ';
    $(this).attr("disabled", "disabled");
  });
  $("#disp1").html(intro + '<br>' + input + ' and ' + outro);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="inp">
  <textarea id="inp1" rows="4" cols="50" name="inp1"></textarea>
  <textarea id="inp2" rows="4" cols="50" name="inp2"></textarea>
  <textarea id="inp3" rows="4" cols="50" name="inp3"></textarea>
</div>



<a id="disp1" target="_blank"> </a>

从3个输入中获取并同时替换

2 个答案: