Как получить значение внутреннего элемента при нажатии на li, используя JQuery - PullRequest
Новая
       10

Как получить значение внутреннего элемента при нажатии на li, используя JQuery

0 голосов
/ 09 апреля 2020

Это мой элемент li. Я хочу получить только значение класса 'preview' при нажатии на элемент li с помощью jquery. 

<li class="contact">
    <div class="wrap">
        <span class="contact-status online"></span>
        <img src="" alt="" width="45px" height="45px" />
        <div class="meta">
            <p class="name">John</p>
            <p class="preview">john@gmail.com</p>
        </div>
    </div>
</li>

Вывод должен быть: john@gmail.com

Я пробовал код ниже: 

$('li.contact').on("click", function(e) {
    e.preventDefault();
    var data = $('.preview').val($(this).text());
})

Получаю полный список событий щелчка элементов li как вывод.

Пожалуйста, помогите в этом. Спасибо.

Ответы [ 2 ]

2 голосов
/ 09 апреля 2020

Вы хотели бы прикрепить обработчик события click к каждому узлу списка, тогда несколько способов могли бы найти текстовое значение дочерних узлов, один подход мог бы использовать event.target, чтобы получить доступ к узлу списка, по которому щелкнули, или моему подход будет перебирать коллекцию узлов списка, как показано в следующем примере. 

const theLinkContains = email => document.querySelector('h2 span').textContent = email;

(() =>
{
  document.querySelectorAll('li.contact')
    .forEach(link =>
    {
      link.addEventListener('click', () =>
      {
        theLinkContains(link.querySelector('.preview').textContent);
      });
    });
})();
ul {
  display: flex;
  flex-direction: column;
  padding-left: 0;
  margin-bottom: 0;
}

li {
  position: relative;
  display: block;
  padding-left: 5px;
  margin-bottom: -1px;
  background-color: rgb(255, 255, 255);
  border: 1px solid rgba(0, 0, 0, .125);
}

.preview {
  display: none;
}
<h2>Result: <span></span></h2>
<ul>
  <li class="contact">
    <div class="wrap">
      <span class="contact-status online"></span>
      <img src="" alt="" width="45px" height="45px" />
      <div class="meta">
        <p class="name">John</p>
        <p class="preview">john@gmail.com</p>
      </div>
    </div>
  </li>
  <li class="contact">
    <div class="wrap">
      <span class="contact-status online"></span>
      <img src="" alt="" width="45px" height="45px" />
      <div class="meta">
        <p class="name">Bob</p>
        <p class="preview">Bob@gmail.com</p>
      </div>
    </div>
  </li>
</ul>
1 голос
/ 09 апреля 2020

Проблема в вашем коде заключается в использовании .val () , что неправильно иметь его здесь, вам нужно выбрать тег <li> и затем выполнить .find () чтобы получить ребенка .preview, а затем получить его текст, используя .text () Вот что вы должны иметь в своем коде: 

$('li.contact').on("click", function(e) {
    e.preventDefault();
    var data = $(this).find('.preview').text();
    console.log(data);
})
<li class="contact">
    <div class="wrap">
        <span class="contact-status online"></span>
        <img src="" alt="" width="45px" height="45px" />
        <div class="meta">
            <p class="name">John</p>
            <p class="preview">john@gmail.com</p>
        </div>
    </div>
</li>

<script
  src="https://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous"></script>
...