如何根据触发元素/可见隐藏div的title文本填充表单隐藏字段值

嘿，这个需求很明确，我来帮你搞定！核心就是在点击触发图片时，关联对应的隐藏div，把它的标题文本同步到表单的隐藏字段里对吧？下面分步骤给你详细方案：

1. 先确认你的HTML结构（补全版） #

首先确保你的HTML结构是这样的（方便后续JS匹配）：

<!-- 触发图片 -->
<img class="one-trigger" src="img1.jpg" alt="Open #One">
<img class="two-trigger" src="img2.jpg" alt="Open #Two">
<img class="three-trigger" src="img3.jpg" alt="Open #Three">
<!-- ... 剩下3个触发图片 -->

<!-- 隐藏内容div -->
<div id="One" class="hidden-content">
  <h2 class="one-title">标题1：产品A咨询</h2>
  <form action="/submit" method="post">
    <input type="hidden" name="form-title" class="hidden-input">
    <!-- 其他表单元素：输入框、按钮等 -->
    <input type="text" name="name" placeholder="你的名字">
    <button type="submit">提交</button>
  </form>
</div>

<div id="Two" class="hidden-content">
  <h2 class="two-title">标题2：产品B咨询</h2>
  <form action="/submit" method="post">
    <input type="hidden" name="form-title" class="hidden-input">
    <!-- 其他表单元素 -->
    <input type="text" name="name" placeholder="你的名字">
    <button type="submit">提交</button>
  </form>
</div>

<!-- ... 剩下4个隐藏div -->

2. 基础CSS（隐藏初始内容） #

先给隐藏div加个默认隐藏的样式：

.hidden-content {
  display: none;
  margin-top: 20px;
  padding: 15px;
  border: 1px solid #eee;
}

3. JavaScript实现（两种方案可选） #

方案一：用jQuery（简洁易读） #

如果你的项目已经引入了jQuery，用这个最方便：

// 给所有带-trigger后缀的图片绑定点击事件
$('[class$="-trigger"]').click(function() {
  // 先隐藏所有内容div，保证每次只显示一个
  $('.hidden-content').hide();
  
  // 提取触发元素的后缀（比如从one-trigger拿到one）
  const suffix = $(this).attr('class').replace('-trigger', '');
  
  // 找到对应的目标div（ID是首字母大写的后缀，比如One）
  const targetDiv = $('#' + suffix.charAt(0).toUpperCase() + suffix.slice(1));
  
  // 显示目标div
  targetDiv.show();
  
  // 获取该div里的标题文本
  const titleText = targetDiv.find('.' + suffix + '-title').text().trim();
  
  // 把标题填入该div表单的隐藏字段
  targetDiv.find('.hidden-input').val(titleText);
});

方案二：原生JavaScript（无需依赖） #

如果不想用jQuery，原生JS也能轻松实现：

// 获取所有触发图片
const triggers = document.querySelectorAll('[class$="-trigger"]');

triggers.forEach(trigger => {
  trigger.addEventListener('click', function() {
    // 隐藏所有内容div
    document.querySelectorAll('.hidden-content').forEach(div => {
      div.style.display = 'none';
    });
    
    // 提取触发元素的后缀
    const suffix = this.className.replace('-trigger', '');
    
    // 找到目标div
    const targetId = suffix.charAt(0).toUpperCase() + suffix.slice(1);
    const targetDiv = document.getElementById(targetId);
    
    // 显示目标div
    targetDiv.style.display = 'block';
    
    // 获取标题文本并赋值给隐藏字段
    const title = targetDiv.querySelector('.' + suffix + '-title').textContent.trim();
    targetDiv.querySelector('.hidden-input').value = title;
  });
});

关键逻辑说明 #

• 用[class$="-trigger"]选择器匹配所有触发元素，不管是one到six都能覆盖，不用写6次重复代码
• 提取后缀后转成首字母大写的ID，对应你的#One、#Two命名规则
• 每次点击先隐藏所有div，避免多个内容同时显示
• 用trim()去掉标题文本的多余空格，保证隐藏字段的值干净

额外优化小技巧 #

如果需要页面加载时默认显示某个div，比如#One，可以在JS代码最后加一行：

// jQuery版
$('.one-trigger').trigger('click');

// 原生JS版
document.querySelector('.one-trigger').click();

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