JavaScript 获取多个元素的文本值

Question

我想当用户点击带边框的容器时，'Name' 文本应该只显示容器的名称，'Subject' 文本应该只显示容器的主题，但是这段代码显示 'Name' 和 'Subject' 容器内的所有元素。我的意思是一个容器内有两个元素。一种是 class 'name'，另一种是 class 'subject'。当我单击带边框的容器时，我想获取 'name' 文本并将其写入带有 class resname 的元素中。主题也是一样。知道如何解决吗？

var name = document.querySelectorAll('.name');
var gname = $('.resname');
var gsub = $('.ressubject');

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

  gname.text($(this).text());
  gsub.text($(this).text());
});

.container {
border: 1px solid red;
cursor: pointer;
padding: 5px;
}

.resname, .ressubject {
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="header">
    <span class="name">firstname</span>
  </div>
  <div class="body">
    <span class="subject">firstsubject</span>
  </div>
</div>
<br>
<div class="container">
  <div class="header">
    <span class="name">secondname</span>
  </div>
  <div class="body">
    <span class="subject">secondsubject</span>
  </div>
</div>
<hr><br>
<div class="result">
  <span>Name: <span class="resname"></span></span><br>
  <span>Subject: <span class="ressubject"></span></span>
</div>

Answer 1

这是你想要的吗？

const container = document.querySelector('.container');
const output = document.querySelector('.output');
const outputItemName = output.querySelector('.output-item > span[data-name]');
const outputItemSubject = output.querySelector('.output-item > span[data-subject]');

container.addEventListener('click', (e) => {
  const containerItem = e.target.closest('.container-item');

  if (!containerItem) return;

  const { name, subject } = containerItem.dataset;

  outputItemName.innerText = name;
  outputItemSubject.innerText = subject;
});

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container-inner>* {
  margin-bottom: 16px;
}

.container-inner>*:last-of-type {
  margin-bottom: 0;
}

.container-item {
  padding: 8px;
  border: 1px solid black;
  cursor: pointer;
}

.output {
  margin-top: 16px;
}

<div class="container">
  <div class="container-inner">
    <div class="container-item" data-name="First name" data-subject="First subject">
      <div class="container-item-name">First name</div>
      <div class="container-item-subject">First subject</div>
    </div>

    <div class="container-item" data-name="Second name" data-subject="Second subject">
      <div class="container-item-name">Second name</div>
      <div class="container-item-subject">Second subject</div>
    </div>
  </div>
</div>

<div class="output">
  <div class="output-inner">
    <div class="output-item">
      <span>Name:</span>
      <span data-name></span>
    </div>

    <div class="output-item">
      <span>Subject:</span>
      <span data-subject></span>
    </div>
  </div>
</div>

JavaScript 获取多个元素的文本值

JavaScript get multiple element's text values

html

javascript

jquery

element