如何编写图片if判断逻辑 实现点击图片后动态修改edit编辑框文本

你可以按「跨页面存选中状态+图片绑定业务标识做判断」的思路实现，不需要写冗余的硬编码逻辑：

问题1：第二个表单编辑框展示对应动物文本 #

核心是不要把动物文本写死在第二个表单的代码里，在第一个页面点击动物图片触发跳转时，把当前选中的动物信息存在跨页面可访问的共享状态（全局变量、路由传参、本地缓存都可以）里，第二个表单初始化时直接读取状态赋值给编辑框即可。
参考实现代码：

// 先维护统一的动物配置映射，后续新增动物直接加配置就行
const animalConfig = {
  deer: {
    key: 'deer',
    name: '鹿',
    gender: 'male', // 第一页展示的鹿默认性别，可根据实际需求调整
  },
  // 其他动物配置按相同格式往后追加
}
// 跨表单共享的选中状态变量
let selectedAnimal = null

// 第一页所有动物图片的通用点击事件
function handleAnimalClick(animalKey) {
  // 存下当前选中的动物信息
  selectedAnimal = animalConfig[animalKey]
  // 执行跳转到性别匹配表单的逻辑
  navigateToGenderForm()
}

// 第二个表单的初始化逻辑
function initGenderForm() {
  // 读取之前存的选中动物信息，给编辑框赋值
  editBox.textContent = `请从下方图片中选出${selectedAnimal.name}的相反性别个体`
}

问题2：编写图片点击判断逻辑实现文本自动切换 #

不要靠判断图片资源路径做分支判断，给第二页的3张选项图片提前绑定固定的业务标识属性（前端可以给DOM加data-*属性，游戏引擎里可以给图片节点加自定义属性），点击时直接读取标识做判断，后续换图、调整资源位置不会影响逻辑运行。
参考判断逻辑：

// 第二页选项图片的通用点击事件
function handleOptionImgClick(clickTarget) {
  // 读取点击图片上提前绑定的标识
  const { animalKey, gender } = clickTarget.customAttr
  // 分支判断
  if (animalKey === selectedAnimal.key && gender !== selectedAnimal.gender) {
    editBox.textContent = `回答正确！你选中的是${selectedAnimal.name}的相反性别个体`
  } else if (animalKey === selectedAnimal.key && gender === selectedAnimal.gender) {
    editBox.textContent = `回答错误，当前选中的${selectedAnimal.name}和题干是同一性别，请重新选择`
  } else {
    editBox.textContent = `回答错误，当前选中的动物不是${selectedAnimal.name}，请重新选择`
  }
}

优化提示 #

• 所有动物名称、属性统一维护在配置映射表里，不要散落在各个判断分支里硬编码，后续迭代改文案、加动物只需要改配置
• 图片绑定的业务标识要和配置表里的key保持一致，避免判断失效

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