点击a1 div获取其子元素a2、a4值并存入sessionStorage问题

你的代码存在几个核心问题导致无法获取对应子元素的值：

• 逻辑完全偏离需求：你写的on()函数是给所有.a2/.a4绑定点击事件，而非在点击.a1时直接获取它的子元素内容
• 错误存储对象：sessionStorage仅支持存储字符串类型数据，不能直接存入jQuery对象
• 代码位置错误：sessionStorage.setItem写在函数外部，此时变量a/b要么未初始化，要么是绑定事件的jQuery对象，根本不是你需要的文本值

下面是修正后的完整代码，实现点击.a1时获取当前元素下的.a2和.a4文本，并存入sessionStorage：

<!DOCTYPE html>
<html>
<head>
  <title> Login Form in HTML5 and CSS3</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
</head>
<body>
<div class="a1">
  <div class="a2" > first first value </div>  
  <div class="a4" > first second value </div> 
</div>
<div class="a1">  
  <div class="a2" > second first value </div>  
  <div class="a4" > second second value </div> 
</div>

<script>
// 用jQuery绑定.a1的点击事件，比内联onclick更易维护
$('.a1').on('click', function() {
  // 获取当前点击的.a1下的子元素文本，trim()清理前后多余空格
  const a2Text = $(this).find('.a2').text().trim();
  const a4Text = $(this).find('.a4').text().trim();
  
  // 存入sessionStorage
  sessionStorage.setItem('data', a2Text);
  sessionStorage.setItem('data1', a4Text);
  
  // 如果需要发送AJAX到下一页，示例代码如下：
  /*
  $.ajax({
    url: '你的目标页面地址',
    method: 'POST',
    data: {
      data: a2Text,
      data1: a4Text
    },
    success: function(response) {
      // 请求成功后跳转至下一页
      window.location.href = '下一页地址';
    }
  });
  */
});
</script>

<style>
.a1 {
  width      : 310px;
  height     : 400px;
  border     : 2px solid red;
  display    : inline-block;
  margin-top : 100px;
}
.a4 {
  border  : 1px solid gray;
  padding : 5px;
}
.a2 {
  border  : 1px solid gray;
  padding : 5px;
}
</style>
</body>
</html>

关键修正点说明： #

• 移除内联onclick，改用jQuery的.on()绑定事件，更符合现代前端规范
• 点击.a1时用$(this)指代当前元素，再通过.find()精准定位其子元素，避免选中页面所有同class元素
• 用.text().trim()获取并清理文本内容，保证数据整洁
• 直接将字符串文本存入sessionStorage，符合存储规则
• 附带AJAX发送数据的示例代码，按需启用即可

内容的提问来源于stack exchange，提问作者Vasu devan gupta