Как получить текстовое значение по нажатой ссылке?

Question

У меня совпадающий текст в разных частях документа. Первый - это набор «тегов» в таблице, например:

<div id="my-div">
  <div><a href="#">tag 1</a></div>
  <div><a href="#">tag 2</a></div>
</div>

Затем в некоторых других частях документа у меня есть скрытый элемент после элементов, которые я хочу выделить, когда соответствующая ссылка выбрана следующим образом:

<div class="hide-me">tag 1</div>

Тогда моя функция щелчка выглядит следующим образом:

$('#my-div a').click(function() {
  var txt = $(this).text();
  console.log(txt);
});

Вывод - пустая строка, но я не уверен почему.

Answer 1

Ваш код, кажется, правильный, попробуйте этот тоже.

$('#my-div a').click(function(e) {
  var txt = $(e.target).text();
  console.log(txt);
});

Answer 2

$ ('# my-div a') неоднозначно.

Идет чтение всех тегов a внутри '# my-div'

Вам нужно указать, какой из2 метки нажата ..

Answer 3

В вашем случае я бы не использовал текст ссылки, так как возможно, что она может измениться в будущем (т.е. вам нужно перевести свой сайт). Лучшее решение - добавить пользовательский атрибут в ссылки:

<div id="my-div">
  <div><a href="#" sectionId="someId1">tag 1</a></div>
  <div><a href="#" sectionId="someId2">tag 2</a></div>
</div>

А затем поместите идентификатор скрытого тега туда, чтобы вы и с:

$('#my-div a').click(function() {
  var sectionId = $(this).attr('sectionId');
  $('#' + sectionId).show();
  return false; // return false so the browser will not scroll your page
});