JavaScript如何根据三项输入条件显示对应id的DIV元素

第一步：修正并补充HTML代码 #

你现有代码存在几个需要调整的小问题：单选框未做分组处理、表单按钮默认会触发页面刷新、列表项缺少父级ul标签，调整后代码如下：

<div class="dietSelector">
  <div class="diet">
    <div class="header">
      <h2>饮食选择</h2>
    </div>
    <!-- 给单选框增加父级ul，同时添加name属性将三个单选框归为同一组 -->
    <ul>
      <li class="nav-item">
        <input type="radio" name="dietType" id="anything"> 任意饮食
      </li>
      <li class="nav-item">
        <input type="radio" name="dietType" id="keto"> 生酮饮食
      </li>
      <li class="nav-item">
        <input type="radio" name="dietType" id="vegetarian"> 素食
      </li>
    </ul>
    <form class="form" id="form-control">
      <label>卡路里数值:</label>
      <input type="number" id="calories" min="500" max="5000">
      <br><br>
      <label>餐食份数:</label>
      <input type="number" placeholder="2" id="meals" min="1" max="5">
      <!-- 给按钮添加type="button"阻止表单默认提交刷新行为，修正onclick写法 -->
      <button type="button" onClick="create()" value="create">生成方案</button>
      <br><br>
    </form>
  </div>
  <!-- 新增结果展示区域，你可以提前把所有对应id的DIV放在这里，默认隐藏 -->
  <div id="resultArea">
    <!-- 示例DIV，你可以按照自己的ID规则替换成所有需要展示的DIV -->
    <div id="anything-2000-2" class="result-div" style="display: none;">任意饮食 2000卡路里 2份餐 对应内容</div>
    <div id="keto-1800-3" class="result-div" style="display: none;">生酮饮食 1800卡路里 3份餐 对应内容</div>
    <div id="vegetarian-1500-1" class="result-div" style="display: none;">素食 1500卡路里 1份餐 对应内容</div>
    <div id="no-match" class="result-div" style="display: none;">没有找到对应餐食方案</div>
  </div>
</div>

第二步：添加JavaScript代码 #

直接把这段代码放在HTML的</body>标签前即可，逻辑说明已经写在注释里：

function create() {
  // 1. 获取选中的饮食类型
  const selectedDiet = document.querySelector('input[name="dietType"]:checked')
  // 未选中饮食类型直接提示返回
  if (!selectedDiet) {
    alert('请先选择饮食类型')
    return
  }
  const dietType = selectedDiet.id

  // 2. 获取卡路里数值，转成数字格式
  const calories = Number(document.getElementById('calories').value)
  // 校验输入合法性
  if (isNaN(calories) || calories < 500 || calories > 5000) {
    alert('请输入500-5000范围内的卡路里数值')
    return
  }

  // 3. 获取餐食份数，转成数字格式
  const meals = Number(document.getElementById('meals').value)
  if (isNaN(meals) || meals < 1 || meals > 5) {
    alert('请输入1-5范围内的餐食份数')
    return
  }

  // 4. 拼接目标DIV的ID，你可以根据自己的实际规则调整拼接逻辑
  const targetId = `${dietType}-${calories}-${meals}`
  const targetDiv = document.getElementById(targetId)

  // 5. 先隐藏所有结果DIV
  document.querySelectorAll('.result-div').forEach(div => div.style.display = 'none')

  // 6. 显示匹配到的DIV，没有匹配到就显示无匹配提示
  if (targetDiv) {
    targetDiv.style.display = 'block'
  } else {
    document.getElementById('no-match').style.display = 'block'
  }
}

自定义调整说明 #

• 你可以根据自己的实际ID规则修改targetId的拼接逻辑
• 提前把所有需要展示的对应ID的DIV放在resultArea容器中，默认加上style="display: none;"隐藏即可
• 如果需要动态生成DIV而不是提前写死，把第5、6步的逻辑替换成创建DOM节点插入到页面的代码即可

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