Блог

Главная - Вопросы по программированию - JavaScript Получает текстовый контент выбранного элемента

JavaScript Получает текстовый контент выбранного элемента

#javascript #html #jquery #for-loop

Вопрос:

Я хочу создать программу, которая выпишет текстовое содержимое элемента, который нажал. По какой-то причине эта программа получает только содержимое последнего элемента. Есть идеи, что я должен изменить внутри цикла for?

 var emailname = document.querySelectorAll(".name");

var gSenderName = document.getElementById('sname');

$('.name').click(function() {

  for (var i = 0; i < emailname.length; i  ) {
    const sendername = emailname[i].textContent;
    gSenderName.textContent = sendername;

  }

}); 
 .name:hover {
  text-decoration: underline;
  cursor: pointer;
} 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="name">first</div><br>
<div class="name">second</div><br>
<div class="name">third</div>
<br>

<div>Selected:
  <div id="sname"></div>
</div>

Ответ №1:

Вам здесь вообще не нужна петля. Вы можете просто получить текст текущего щелкнутого элемента с помощью this объекта. Я также посоветую вам не смешивать ванильный JS и jQuery без необходимости:

 var gSenderName = $('#sname');

$('.name').click(function(){
  gSenderName.text($(this).text());
}); 
 .name:hover {
  text-decoration: underline;
  cursor: pointer;
} 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="name">first</div><br>
<div class="name">second</div><br>
<div class="name">third</div>
<br>

<div>Selected: 
  <div id="sname"></div>
</div>

Ответ №2:

Цикл запускается и задает текстовое содержимое каждого элемента один за другим. Поскольку каждый переопределяет другой, вы всегда получаете последний.

Просто установите текстовое содержимое элемента, на который был нажат:

 var gSenderName = document.getElementById('sname');

$('.name').click(e => {
  gSenderName.textContent = e.target.textContent;
}); 
 .name:hover {
  text-decoration: underline;
  cursor: pointer;
} 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="name">first</div><br>
<div class="name">second</div><br>
<div class="name">third</div>
<br>

<div>Selected:
  <div id="sname"></div>
</div>
Метки: