如何根据下拉菜单的颜色选择隐藏不匹配的水果图片

实现方案 #

你需要先给每个水果图片加上颜色标识的自定义属性，再修正原有代码的语法错误，补充过滤逻辑即可实现需求，完整可运行代码如下：

HTML 代码

<select id="list" onChange="getSelectedValue()">
  <option value="SelectColour">Select Colour</option>
  <option value="green">green</option>
  <option value="red">red</option>
  <option value="yellow">yellow</option>
</select>

<h2></h2>

<a><img src="pear.png" alt="pear" data-color="green"></a>
<a><img src="apple.png" alt="apple" data-color="red"></a>
<a><img src="watermelon.png" alt="watermelon" data-color="green"></a>
<a><img src="banana.png" alt="banana" data-color="yellow"></a>

CSS 代码

h2 {
  color: gray;
  text-align: center;
}

img {
  border: 0px solid #ddd;
  border-radius: 5px;
  padding: 10px;
  width: 60px;
  /* 修正原无效属性值，show改为visible */
  visibility: visible;
}
/* 隐藏专用类 */
img.hidden {
  visibility: hidden;
  /* 如果需要隐藏后不占用页面位置，可以换成下面的配置
  display: none;
  */
}

JS 代码

// 修正原函数定义的语法错误
function getSelectedValue() {
  const selectedValue = document.getElementById("list").value;
  // 获取所有带颜色标识的水果图片
  const allFruitImgs = document.querySelectorAll('img[data-color]');
  
  allFruitImgs.forEach(img => {
    if (selectedValue === 'SelectColour') {
      // 切回默认选项时所有图片显示
      img.classList.remove('hidden');
    } else {
      // 匹配选中颜色，不匹配的图片隐藏
      img.dataset.color === selectedValue ? img.classList.remove('hidden') : img.classList.add('hidden');
    }
  })
}

核心改动说明 #

• 给每个img标签新增data-color自定义属性，标记对应水果的颜色分类，作为JS过滤的判断依据
• 修正了原JS函数的定义语法错误，补充了遍历图片、匹配颜色、切换显示状态的核心逻辑
• 修正了CSS中visibility的无效属性值，新增隐藏专用类名，统一控制显示状态
• 清理了HTML中select标签内的无效冗余字符

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