在Django提交表单时，如何将HTML元素的CSS属性值作为输入？

嘿，我来帮你搞定这个需求！根据你的描述，我们要实现两个核心功能：一是确保同一时间只有一个物种文本是粗体（类似单选效果），二是点击搜索按钮时，把当前粗体的物种名称作为查询条件去请求数据库。下面是具体的实现思路和代码示例：

1. 先搞定单选粗体的交互逻辑 #

首先我们需要给每个物种项绑定点击事件，当用户点击某个物种的图标或文本时，先移除所有物种文本的粗体样式，再给当前选中的加上，这样就能保证同一时间只有一个粗体文本。

HTML 结构示例 #

假设你的页面结构是这样的（每个物种包含图标和文本）：

<!-- 物种容器 -->
<div class="species-item">
  <div class="species-icon">
    <img src="d_rerio_icon.png" alt="斑马鱼">
  </div>
  <p class="species-name">D. rerio</p>
</div>
<div class="species-item">
  <div class="species-icon">
    <img src="m_musculus_icon.png" alt="小鼠">
  </div>
  <p class="species-name">M. musculus</p>
</div>
<!-- 更多物种项... -->

<!-- 搜索按钮 -->
<button id="search-btn">搜索</button>

CSS 定义粗体样式 #

我们用一个类来标记粗体文本，方便JS操作：

.bold-text {
  font-weight: bold;
}

JavaScript 处理选中交互 #

// 获取所有物种名称元素
const speciesNames = document.querySelectorAll('.species-name');
// 获取所有物种容器（方便点击图标也能选中）
const speciesItems = document.querySelectorAll('.species-item');

// 给每个物种容器绑定点击事件
speciesItems.forEach(item => {
  item.addEventListener('click', () => {
    // 先移除所有物种文本的粗体类
    speciesNames.forEach(el => el.classList.remove('bold-text'));
    // 给当前容器里的物种文本添加粗体类
    const targetName = item.querySelector('.species-name');
    targetName.classList.add('bold-text');
  });
});

2. 点击搜索按钮时获取查询条件 #

接下来处理搜索按钮的点击事件，找到当前处于粗体状态的物种名称，用它作为参数去请求数据库：

const searchBtn = document.getElementById('search-btn');

searchBtn.addEventListener('click', () => {
  // 找到当前带有粗体类的物种名称元素
  const activeSpecies = document.querySelector('.species-name.bold-text');
  
  if (activeSpecies) {
    // 获取物种名称文本，去除前后空格
    const queryName = activeSpecies.textContent.trim();
    console.log('当前查询物种：', queryName);
    
    // 这里写请求数据库的代码，比如用fetch或Axios
    // 示例：用fetch发送GET请求
    fetch(`/api/get-species-data?name=${encodeURIComponent(queryName)}`)
      .then(res => res.json())
      .then(data => {
        // 处理数据库返回的数据，比如渲染到页面
        console.log('查询结果：', data);
      })
      .catch(err => {
        console.error('请求出错：', err);
      });
  } else {
    // 如果没有选中任何物种，提示用户
    alert('请先选择一个物种再搜索哦！');
  }
});

3. 可选优化：页面初始化默认选中一个物种 #

如果需要页面加载完成后就默认选中第一个物种，可以添加这段代码：

window.addEventListener('DOMContentLoaded', () => {
  if (speciesNames.length > 0) {
    // 默认选中第一个物种
    speciesNames[0].classList.add('bold-text');
  }
});

这样一套下来，就能完美实现你想要的功能啦！

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