JavaScript中点击按钮时如何获取对应关联div内指定span的文本值

现有结构直接实现 #

因为作业项是动态渲染的，推荐用事件委托绑定点击事件，不需要给每个按钮单独绑定，性能更高，也适配动态新增的元素：

// 给所有作业项的共同父容器绑定事件，比如你渲染作业列表的外层容器
document.querySelector('.assignment-list').addEventListener('click', function(e) {
  // 判断点击的是否为Assign按钮
  if (e.target.classList.contains('assign-task')) {
    // 向上查找当前按钮对应的作业根容器
    const assignmentWrapper = e.target.closest('.assignment-wrapper');
    // 获取对应的作业名称
    const assignmentName = assignmentWrapper.querySelector('.assignment-name').textContent;
    // 此处可替换为自身业务逻辑
    console.log(assignmentName);
  }
})

该方法完全兼容你当前的HTML结构，不需要调整现有代码即可生效。

更合理的结构优化方案 #

你可以给每个作业的根容器.assignment-wrapper加上自定义数据属性，直接存储作业的核心字段，后续获取数据更稳定，不会因为HTML结构调整导致取值逻辑失效。

优化后的HTML结构示例：

<div class="assignment-wrapper" 
  data-assignment-id="1001" 
  data-assignment-name="English UOI 1"
  data-assignment-date="15-06-2021">
    <div class="assignment-title">
        <span class="assignment-name">English UOI 1</span>
        <span>15-06-2021</span>
    </div>
    <div class="assignment-functions">
        <div class="assign-task assignment-function-btn">Assign</div>
        <div class="update-task assignment-function-btn">Update</div>
        <div class="view-results assignment-function-btn">Results</div>
    </div>
</div>

对应的取值逻辑可以简化为：

document.querySelector('.assignment-list').addEventListener('click', function(e) {
  if (e.target.classList.contains('assign-task')) {
    const assignmentData = e.target.closest('.assignment-wrapper').dataset;
    // 直接从dataset里取所有需要的字段
    console.log(assignmentData.assignmentName);
    // 存储了作业ID的话后续调用接口也更方便
    console.log(assignmentData.assignmentId);
  }
})

这种方案扩展性更强，后续如果需要用到作业的其他字段，直接加data-*属性就可以，不用额外修改DOM查找逻辑。

内容的提问来源于stack exchange，提问作者Utkarsh Tyagi