Question

我想显示一个或多个图像，具体取决于下拉菜单，并且使用javascript。

对于第一个选择，我想显示一个图像，但是对于第二个选择，我想显示两个图像，第一个图像加上新图像。我找到了许多根据下拉选项显示不同图像的答案，但是如果用户选择该下拉选项，则找不到如何显示img + img的答案。

顺便说一句，我没有太多的javascript经验，但这就是我想要的。听起来很简单，但对我而言却不是... :-)谢谢！

这就是我一直认为js代码应该看起来但不起作用的方式。我相信您可以告诉我为什么以及什么是正确的解决方案...谢谢大家！在此之前，我定义了var ...

var ring1 = document.getElementById('ring1');
var ring2 = document.getElementById('ring2');
var ring3 = document.getElementById('ring3');
var ring4 = document.getElementById('ring4');
var ring5 = document.getElementById('ring5');
var ring6 = document.getElementById('ring6');
var ring1img = document.getElementById('ring1img');
var ring2img = document.getElementById('ring2img');
var ring3img = document.getElementById('ring3img');
var ring4img = document.getElementById('ring4img');
var ring5img = document.getElementById('ring5img');
var ring6img = document.getElementById('ring6img');

function selectedOption() {
  if (ring1.value == 1) {
    ring1img.style.display = 'block';
    ring2img.style.display = 'none';
    ring3img.style.display = 'none';
    ring4img.style.display = 'none';
    ring5img.style.display = 'none';
    ring6img.style.display = 'none';
  }
}

<form id="regForm" action="">

  <h1>Ring Schedule Display System</h1>

  <div class="tab">Club info:
    <p><input id="club" placeholder="Name of club..." input type="text"></p>
    <p><input placeholder="City..." input type="text"></p>
    <select number="rings" id="rings" onChange="selectedOption()">
      <option hidden>Choose number of rings...</option>
      <option value="1" id="ring1">1 ring</option>
      <option value="2" id="ring2">2 rings</option>
      <option value="3" id="ring3">3 rings</option>
      <option value="4" id="ring4">4 rings</option>
      <option value="5" id="ring5">5 rings</option>
      <option value="6" id="ring6">6 rings</option>
    </select>
  </div>
</form>

<div class="tab">Welcome <b><span id="clubresult" style="font-size: 25px" ></span></b><br>
  <h2 align="center">Cat Show <b><span id="cityresult" style="font-size: 25px;"></span></b></h2>
  <img src="iconRing1.png" alt="ring1" style="width: 20%; display: " id="ring1img">
  <img src="iconRing2.png" alt="ring2" style="width: 20%; display: " id="ring2img">
  <img src="iconRing3.png" alt="ring3" style="width: 20%; display: " id="ring3img">
  <img src="iconRing4.png" alt="ring4" style="width: 20%; display: " id="ring4img">
  <img src="iconRing5.png" alt="ring5" style="width: 20%; display: " id="ring5img">
  <img src="iconRing6.png" alt="ring6" style="width: 20%; display: " id="ring6img">
</div>

Answer 1

使用querySelectorAll和forEach，我可以遍历所有环，并首先删除.show类（如果该特定环上存在）。然后，如果forEach索引低于从所选选项获取的值，则可以再次添加.show类。

之所以可行，是因为默认情况下，每个.ring在CSS中都设置了display:none。但是.show用display:inline-block覆盖了这一点。

const ringSelector = document.getElementById('ringSelect');
const rings = document.querySelectorAll('.ringImg');
ringSelector.addEventListener('change', handleChange);

function handleChange(e) {
  const amount = +e.target.value;
  rings.forEach((ring, i) => {
    ring.classList.remove('show');
    if (i < amount) {
      ring.classList.add('show');
    }
  })
}

.ringImg {
  display: none;
  width: 20px;
  height: 20px;
  border: 2px solid gold;
  border-radius: 50%;
}

.show {
  display: inline-block;
}

<select id="ringSelect">
  <option hidden>Choose number of rings...</option>
  <option value="1">1 ring</option>
  <option value="2">2 rings</option>
  <option value="3">3 rings</option>
  <option value="4">4 rings</option>
  <option value="5">5 rings</option>
  <option value="6">6 rings</option>
</select>

<div class="ringImg"></div>
<div class="ringImg"></div>
<div class="ringImg"></div>
<div class="ringImg"></div>
<div class="ringImg"></div>
<div class="ringImg"></div>

Answer 2

好的，谢谢所有回答我问题的人。 @ksav帮助我找到了解决方案，现在它可以工作。

<style>
.ringImg {
  display: none;
  width: 20px;
  height: 20px;
  border: 2px solid gold;
  border-radius: 50%;
}
.ringImg2 {
  display: none;
  width: 20px;
  height: 20px;
  border: 2px solid red;
  border-radius: 50%;
}
.ringImg3 {
  display: none;
  width: 20px;
  height: 20px;
  border: 2px solid blue;
  border-radius: 50%;
}
.ringImg4 {
  display: none;
  width: 20px;
  height: 20px;
  border: 2px solid black;
  border-radius: 50%;
}
.ringImg5 {
  display: none;
  width: 20px;
  height: 20px;
  border: 2px solid green;
  border-radius: 50%;
}
.ringImg6 {
  display: none;
  width: 20px;
  height: 20px;
  border: 2px solid yellow;
  border-radius: 50%;
}

.show {
  display: inline-block;
}
</style>

<select id="ringSelect">
  <option hidden>Choose number of rings...</option>
  <option value="1">1 ring</option>
  <option value="2">2 rings</option>
  <option value="3">3 rings</option>
  <option value="4">4 rings</option>
  <option value="5">5 rings</option>
  <option value="6">6 rings</option>
</select>

<div class="ringImg"></div>
<div class="ringImg2"></div>
<div class="ringImg3"></div>
<div class="ringImg4"></div>
<div class="ringImg5"></div>
<div class="ringImg6"></div>

<script>
const ringSelector = document.getElementById('ringSelect');
const rings = document.querySelectorAll('.ringImg, .ringImg2, .ringImg3, .ringImg4, .ringImg5, .ringImg6');
ringSelector.addEventListener('change', handleChange);

function handleChange(e) {
  const amount = +e.target.value;
  rings.forEach((ring, i) => {
    ring.classList.remove('show');
    if (i < amount) {
      ring.classList.add('show');
    }
  })
}
</script>

如何显示一个或多个图像，取决于所选的下拉选项？

2 个答案: