Вот мой простой скрипт, который должен помещать число из span в textarea:
function get_post ()
{
document.getElementById("text").innerHTML = ">>"+document.getElementById("link").innerHTML;
}
<textarea id="text"></textarea>
<br /><br />No. <a href="#" onClick="get_post();"><span id="link">1948491</span></a>
<br /><br />No. <a href="#" onClick="get_post();"><span id="link">42342342</span></a>
Но он работает только для первого элемента. Как я могу заставить его работать с несколькими элементами? Является ли решение с общим id/классом хорошим? Или, может быть, я должен добавить пользовательский id/class для каждого элемента a или span?
И последний вопрос - как я могу изменить содержимое textarea без его очистки? innerHTML удаляет все, что я уже набрал.
С Уважением,
Matt
Причина, по которой он получает только первый элемент, состоит в том, что значения id
должны быть уникальными, поэтому вы всегда сможете получить только первый экземпляр элемента внутри DOM.
Используя JQuery, вы можете сделать нас с this
ключевым словом, чтобы получить элемент span
, например:
$("a.link").click(function (e) {
e.preventDefault();
get_post(this);
});
function get_post (t)
{
var link = $(t);
var textarea = $("#text");
var span = link.find("span");
textarea.val(">>" + span.html());
}
Убедитесь, что вы добавили класс в свои ссылки, чтобы правильно их идентифицировать:
<a href="#" class="link">
id должен быть уникальным в DOM, если вы не получите только первый экземпляр, используйте класс для идентификации нескольких элементов
<textarea id="text"></textarea>
<br /><br />No. <a href="#" class="link"><span>1948491</span></a>
<br /><br />No. <a href="#" class="link"><span>42342342</span></a>
<script>
$('a.link').click(function() {
$("#text").val($("#text").val() + ">>" + $(this).find('span').html());
return false;
});
</script>
Я согласен с @shadow, вы должны использовать class
вместо ID's
. скажем, вы используете link
как class
. после этого следующий код должен работать нормально:
$('.link').on('click',function(e){
e.preventDefault(); // as you are using anchor tag.
var x= $('#text').val(),
y = $(this).text();
$('#text').val(x+y) // if you want previous text too.
$('#text').val(y) // if you want new text only.
});