Javascript - множественный класс. Как я могу отличить, какой из них был нажат?

0

Вот мой простой скрипт, который должен помещать число из 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

Теги:

3 ответа

3
Лучший ответ

Причина, по которой он получает только первый элемент, состоит в том, что значения 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">

Вот рабочий пример

Поделиться
  • 0
    Я вставил точно такой же код, как и ваш, и он не работает. Как только я нажимаю на номер, он ничего не делает. Я включил jquery lib и ошибок нет вообще. Я понятия не имею, почему это не работает.
  • 0
    @MateuszOsuch: избавьтесь от встроенных обработчиков событий, добавьте события щелчка с помощью javascript / JQuery в свой скрипт
Показать ещё 5 комментариев
0

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>
Поделиться
0

Я согласен с @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.
});
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню