时间戳

首页 > 解决方案 > JS：分别从具有相同类的文本区域获取值

javascript - JS：分别从具有相同类的文本区域获取值

问题描述

可以说我有以下文本区域

<textarea class='save'></textarea>
<textarea class='save'></textarea>
<textarea class='save'></textarea>

他们都有“保存”类。我想编写一些 jQuery/JavaScript，它将使用“保存”类从所有文本区域中获取文本。

到目前为止我的代码：

$('#getText').click(function(){
    var text = $('.save').text(); 
});

这将获取所有文本值并将它们添加到变量中。但是，我希望能够先遍历每个 textarea，以便可以对其进行编辑。我的伪代码是这样的：

On button 'click' -> Get first '.save', wrap it in <p></p>, then add a 
<h1>Title</h1>, append this to a variable/array.

然后我可以像这样输出它：

<h1>Text 1</h1>
<p>text from textarea 1</p>

<h1>Text 2</h1>
<p>text from textarea 2</p>

<h1>Text 3</h1>
<p>text from textarea 3</p>

冲洗并重复每个“.save”，有什么想法吗？

标签： javascriptjqueryhtmlcss

解决方案

您可以使用 jQueryeach()来遍历您使用的每个元素$(".save")

然后你可以用它做你需要的事情。在下面的示例中，我创建了一个包含标题的数组，并且每次迭代each()我都会获得一个新标题，将其添加到html字符串中，然后我将textarea当前迭代的值连接到<p>标签中。

let titles = ["text 1", "text 2", "text 3"]
const result = $("#result")

$('#getText').click(function(){
    let html = ""
    var textAreas = $('.save')
    textAreas.each(function(idx) {    
      let txtAreaValue = this.value;
      let title = titles[idx];
      html += "<h2>" + title + "</h2>" 
      html += "<p>" + txtAreaValue + "</p>";
    })
    console.log(html);
    result.html(html);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea class='save'></textarea>
<textarea class='save'></textarea>
<textarea class='save'></textarea>
<input type="button" value="get" id="getText"/>
<div id="result"></div>

推荐阅读