切换多张图片 show/hide

Question

我有 10 张图片想要 toggle/show 在点击时隐藏

我已经通过 CSS 切换了一张图片，但我无法让它与多张图片一起使用，因为标签元素很常见。我尝试将 label 元素更改为 label1 但它不起作用，我还尝试向标签添加 class 但无法使其工作。

显示树的 checked/unchecked 图像的第二张图像是我想要实现的所有 10 张图像。

我不确定我能用 CSS 做什么？有什么想法吗？如果没有，我需要在 jquery 上做什么？任何帮助将不胜感激谢谢

这是我的代码：

#golf {
  display: none;
}

label {
  display: inline-block;
  width: 50px;
  height: 50px;
  cursor: pointer;
  background-image: url(https://www.thatsinsurance.com/golfunselected.png);
}

#golf:checked+label {
  background-image: url(https://www.thatsinsurance.com/golfselected.png);
}

#naturaldisaster {
  display: none;
}

label {
  display: inline-block;
  width: 50px;
  height: 50px;
  cursor: pointer;
  background-image: url(https://www.thatsinsurance.com/naturaldisasterunselected.png);
}

#naturaldisaster:checked+label {
  background-image: url(https://www.thatsinsurance.com/naturaldisasterselected.png);
}

<body>
  <p><input type="checkbox" id="golf" /><label for="golf"></label>
  </p>

  <p><input type="checkbox" id="naturaldisaster" /><label for="naturaldisaster"></label>
  </p>
</body>

Answer 1

使用 css 你可以这样使用：

label{
      display: inline-block;
      width: 50px;
      height: 50px;
      cursor: pointer;
}

input[type='checkbox'] {
    display:none;
}
#naturaldisaster + label {
  background-image: url(https://www.thatsinsurance.com/naturaldisasterunselected.png);
}
#naturaldisaster:checked + label {
  background-image: url(https://www.thatsinsurance.com/naturaldisasterselected.png);
}

你需要对每张照片都这样做。

切换多张图片 show/hide

Toggle multiple image show/hide

css

jquery

show

hide