Выбор радиоизображения - как его улучшить? - PullRequest
Новая
       10

Выбор радиоизображения - как его улучшить?

0 голосов
/ 31 января 2019

Я совершенно новичок в 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>

Ответы [ 2 ]

0 голосов
/ 31 января 2019

Я изменил несколько шагов в вашем коде:

  1. Используйте только одну функцию swap, так как меняется только идентификатор.
  2. Когда вы нажимаете переключатель, звонитефункция swap с идентификатором.
  3. Измените содержимое функции swap для динамического использования идентификатора.

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>
0 голосов
/ 31 января 2019 
<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>
...