Я хотел бы перенести текст из всех div с определенным классом в текстовое поле на той же странице.
Как я могу это сделать?
Например:
< div class="test1" > Example1 < /div > < div class="test2" > Example2 < /div > < div class="test1" > Example3 < /div > < div class="test3" > Example4 < /div >
Я хотел бы передать содержимое класса div test1, и в текстовой области должны отображаться «Example1» и «Example3».
Любая помощь, пожалуйста! javascript или php
Джон
Это легко сделать с помощью jQuery:
var newTextVal = "";
$('.text1').each(
function()
{
newTextVal += $(this).text();
}
);
$('textarea').val( newTextVal );
Это выше будет проходить через каждый элемент с классом «text1» и добавлять его значение текстового узла к тексту в текстовой области.
Если вы ищете чистый javascript, это сработает, хотя такие вещи очень легко обрабатываются в таких фреймворках, как jQuery:
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>
<script type="text/javascript">
function CopyDivsToTextArea()
{
var divs = document.getElementsByTagName("div");
var textToTransfer = "";
var pattern = new RegExp("test1");
for(var i=0;i<divs.length;i++)
{
if(pattern.test(divs[i].className))
{
textToTransfer += (divs[i].innerText || divs[i].textContent);
}
}
document.getElementById("ta").value = textToTransfer;
}
</script>
</head>
<body>
<div class="test1" > Example1 </div >
<div class="test2" > Example2 </div >
<div class="test1" > Example3 </div >
<div class="test3" > Example4 </div >
<br />
<textarea id="ta" cols="50" rows="20"></textarea>
<br />
<input type="button" id="btn" value="Button" onclick="CopyDivsToTextArea();" />
</body>
</html>
if(divs[i].className == "test1"): элементы могут иметь несколько классов CSS, поэтому вы должны проверить это с помощью регулярного выражения или эквивалента вместо простого сравнения равенства. Кроме того, innerHTML, вероятно, неправильный выбор, поскольку вы можете получить нежелательную разметку HTML в текстовом поле. Вместо этого вы можете использовать innerText / textContent: textToTransfer += (divs[i].innerText || divs[i].textContent);. innerText и textContent не совсем эквивалентны, но этого может быть достаточно.
- person Tim Down; 03.11.2009
вы можете просто сделать это с помощью jquery
$(document).ready(function(){
$("#text").keyup(function(){
var text = $("#text").val();
$(".test").html(text);
})
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test"></div>
<textarea id="text"></textarea>Я бы предложил использовать атрибут "id" для div вместо class. По сути, вам нужно будет написать функцию JavaScript, которая использует GetElementById () или GetElementByObject ().
Затем определите кнопку, которая вызывает эту функцию, передав ей идентификатор div и идентификатор текстового поля. Наконец, установите значение объекта textarea равным значению объекта div.
РЕДАКТИРОВАТЬ: Вот функция.
<script type="text/javascript">
function copyValues(idFrom, idTo) {
var objFrom = document.getElementById(idFrom);
var objTo = document.getElementById(idTo);
objTo.value = objFrom.value
}
</script>
В случае, если вы хотите, чтобы он сработал:
copyValues("div1", "textarea1");
copyValues("div2", "textarea2");
copyValues("div3", "textarea3");
