无线电图像选择 - 如何改进它？

Question

我完全是 JS 新手。你能帮我改进我的代码吗？也许它需要一个功能来处理所有选项。我不知道。效果不错，但我觉得，需要改进;)

我想做那样的事情

jQuery(".radio input:radio").each(function() {
    jQuery(this).click(function() {
        ...
    });
});

但我不知道怎么做:(

<div>
    <div id="option287"></div> <div id="option123"></div>
</div>
  
<div id="input-option287">
    <script>
        function swap287(id) {
                const main = document.getElementById('option287');
                const div = document.getElementById("img_" + id);
                const clone = div.cloneNode(true);
                while (main.firstChild) main.firstChild.remove();
                main.appendChild(clone);
            }
    </script>
  <div class="radio">
      <label>
      <input type="radio" id="287_1" name="option[287]"  onclick="swap287('287_1')" value="677" title="" alt="">AAA
      <div style="display:none;"><img src="https://placeimg.com/640/480/people" id="img_287_1" alt="222"></div>
      </label>
    <label>
      <input type="radio" id="287_2" name="option[287]" onclick="swap287('287_2')" value="676" title="" alt="">BBB
      <div style="display:none;"><img src="https://placeimg.com/640/480/nature" id="img_287_2" alt="111"></div>
    </label>
  </div>
</div>
   
<p>Next option</p>
<div id="input-option123">
    <script>
        function swap123(id) {
                const main = document.getElementById('option123');
                const div = document.getElementById("img_" + id);
                const clone = div.cloneNode(true);
                while (main.firstChild) main.firstChild.remove();
                main.appendChild(clone);
            }
    </script>
  <div class="radio">
      <label>
      <input type="radio" id="123_1" name="option[123]"  onclick="swap123('123_1')" value="677" title="" alt="">1111
      <div style="display:none;"><img src="https://placeimg.com/640/480/tech" id="img_123_1" alt="222"></div>
      </label>
    <label>
      <input type="radio" id="123_2" name="option[123]" onclick="swap123('123_2')" value="676" title="" alt="">2222
      <div style="display:none;"><img src="https://placeimg.com/640/480/tech/sepia" id="img_123_2" alt="111"></div>
    </label>
  </div>
</div>

    <p>Next option</p>

Answer 1

<div id="input-option">
        <script>
                function checkedImage(event) {
                    var radio = document.getElementsByClassName("multi-radio");
                    var img = document.getElementsByClassName("multi-img");
                    for (var i = radio.length - 1; i >= 0; i--) {
                        if (event.target == radio[i]) {
                            img[i].style.display = "block";
                        } else {
                            img[i].style.display = "none";
                        }
                    }
                }
            </script>
            <div class="radio">
          <label>
              <input type="radio" name="radio1"  onclick="checkedImage(event)" value="1" title="" alt="" class="multi-radio">1
                <img src="https://placeimg.com/640/480/tech" class="multi-img" alt="1" style="display:none;">
          </label>
            <label>
              <input type="radio" name="radio1" onclick="checkedImage(event)" value="2" title="" alt="" class="multi-radio">2
              <img src="https://placeimg.com/640/480/tech/sepia" class="multi-img" alt="2" style="display:none;">
            </label>
        </div>
    </div>

Answer 2

我更改了您代码中的几个步骤：

仅使用一个 swap 函数，因为只有 ID 发生变化。
单击单选按钮时，调用带有 ID 的 swap 函数。
更改swap函数的内容以动态使用ID。

function swap(id) {
  const num = id.substring(0, 3);
  const main = document.getElementById('option' + num);
  const div = document.getElementById('img_' + id);
  const clone = div.cloneNode(true);
  while (main.firstChild) main.firstChild.remove();
  main.appendChild(clone);
}

jQuery(".radio input:radio").each(function() {
  jQuery(this).click(function() {
    swap($(this).attr('id'));
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <div id="option287"></div>
  <div id="option123"></div>
</div>

<div id="input-option287">
  <script>
  </script>
  <div class="radio">
    <label>
      <input type="radio" id="287_1" name="option[287]" value="677" title="" alt="">AAA
      <div style="display:none;"><img src="https://placeimg.com/640/480/people" id="img_287_1" alt="222"></div>
      </label>
    <label>
      <input type="radio" id="287_2" name="option[287]" value="676" title="" alt="">BBB
      <div style="display:none;"><img src="https://placeimg.com/640/480/nature" id="img_287_2" alt="111"></div>
    </label>
  </div>
</div>

<p>Next option</p>
<div id="input-option123">
  <div class="radio">
    <label>
      <input type="radio" id="123_1" name="option[123]" value="677" title="" alt="">1111
      <div style="display:none;"><img src="https://placeimg.com/640/480/tech" id="img_123_1" alt="222"></div>
      </label>
    <label>
      <input type="radio" id="123_2" name="option[123]" value="676" title="" alt="">2222
      <div style="display:none;"><img src="https://placeimg.com/640/480/tech/sepia" id="img_123_2" alt="111"></div>
    </label>
  </div>
</div>

<p>Next option</p>

无线电图像选择 - 如何改进它？

Radio image selection - how to improve it?

javascript

radio