Javascript: Как показать / скрыть между двумя div с помощью radiobutton?

Question

У меня проблемы с скрытием / показом изображения с помощью переключателей с JavaScript. Что я хочу сделать, так это то, что при загрузке страницы по умолчанию будет отображаться только первое изображение, а второе скрыто. Затем пользователь может выбрать, какой из них отображать или скрывать при нажатии переключателей.

Вот фрагмент того, что я уже сделал.

<input type="radio" name="img1" onclick="img(0)" checked>Image 1
<input type="radio" name="img2" onclick="img(1)">Image 2

<div id="img1">
  <!-- insert image -->
</div>
<div id="img2">
  <!-- insert image -->
</div>


<script>
  function img(x){
    if(x==0){
      document.getElementById('img2').style.display='none';
      document.getElementById('img1').style.display='block';
    }
    else{
      document.getElementById('img1').style.display='none';
      document.getElementById('img2').style.display='block';
    }
    return;
  }
</script>

Проблема в том, что здесьчто после загрузки страницы показываются два изображения. Второе изображение будет скрыто только после нажатия переключателя для первого изображения и наоборот. Кроме того, атрибут флажок не работает.

Answer 1

Проблема с вашим подходом состоит в том, что при добавлении большего количества изображений ваша проверка на скрытие и показ будет постепенно усложняться, и это не будет хорошо в будущем. Вы должны попробовать что-то более гибкое, я приведу пример решения с 3 изображениями, чтобы легче было понять мою точку зрения.

Примечание: тег "name" во входных данных - это то, что создаст "радиогруппа ", поэтому все они должны быть одинаковыми, иначе у вас будет несколько активных радиостанций одновременно.

Входы для выбора видимого изображения, я решил передать идентификаторпотому что это облегчает поиск в следующем шаге

<span><input type="radio" name="image-selector" onclick="handler('img1')" checked>Image 1</span>
<span><input type="radio" name="image-selector" onclick="handler('img2')">Image 2</span>
<span><input type="radio" name="image-selector" onclick="handler('img3')">Image 3</span>

Изображения, отображение на 2 и 3 не будет гарантировать, что только первое видно при запуске, также есть дополнительныйИзображение класса, которое поможет скрыть их все и показать только то, что нам нужно, если мы получим несколько изображений

<div id="img1" class="image">1</div>
<div id="img2" class="image" style="display:none">2 </div>
<div id="img3" class="image" style="display:none">3</div>

Наконец, функция обработчика, которая будет показывать и скрывать ваши изображения, преимущество здесьявляется то, что вы можете добавить больше изображений в ваш HTML без необходимости изменять эту функцию

function handler(x) {
      // get the list of all images and convert the html collection to an array
      var imagesArray = Array.from(document.getElementsByClassName('image'))

      // cycle the array to show the one selected and hide all the others
      imagesArray.forEach(ele => {
        if(ele.id === x) {
          ele.style.display = 'block'
        } else {
          ele.style.display = 'none'
        }
      })
  }

Некоторая информация о вещах, которые я использовал, которые вы не использовали умы

html collection : https://www.w3schools.com/jsref/dom_obj_htmlcollection.asp

getElementsByClassName : https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName

массивы forEach : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach

Answer 2

вы можете установить по умолчанию, чтобы отображать нет

<div id="img2" style="display:none;">
  <!-- insert image -->
</div>

Answer 3

Попробуйте это:

<script>function img(x){
if(x==0){
  document.querySelector("#img1").style.visibility = "visible";
  document.querySelector("#img1").style.display = "block";
  document.querySelector("#img2").style.visibility = "hidden";
  document.querySelector("#img2").style.display = "none";
}
else{
  document.querySelector("#img2").style.visibility = "visible";
  document.querySelector("#img2").style.display = "block";
  document.querySelector("#img1").style.visibility = "hidden";
  document.querySelector("#img1").style.display = "none";
}
return;}</script>

Answer 4

Здесь я хотел бы привести пример переключателя без JavaScript. То же самое можно достичь без использования JavaScript. Однако это может быть хорошо, если небольшое количество переключателей, но не полезно для большего количества переключателей. Кроме того, мы можем использовать SCSS для таких случаев.

Я надеюсь, что это будет полезно.

@import 'https://fonts.googleapis.com/css?family=Open+Sans';

html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body { 
  font-family: 'Open Sans', sans-serif;
}


.tab-content {
  display: none;
}

input.radio-tab[value="1"]:checked ~ #tabOne {
  display: block;
}

input.radio-tab[value="2"]:checked ~ #tabTwo {
  display: block;
}

input.radio-tab[value="3"]:checked ~ #tabThree {
  display: block;
}

<div class="radio-wrapper">
	<input type="radio" class="radio-tab" name="radioTabTest" value="1" id="tab1" checked />
	<label for="tab1">Tab 1</label>
	
	<input type="radio" class="radio-tab" name="radioTabTest" value="2" id="tab2" />
	<label for="tab2">Tab 2</label>
	
	<input type="radio" class="radio-tab" name="radioTabTest" value="3" id="tab3" />
	<label for="tab3">Tab 3</label>
	
	<div id="tabOne" class="tab-content">
		<img src="https://cdn.pixabay.com/photo/2016/01/08/11/57/butterfly-1127666_960_720.jpg" height="200"/>
	</div>
	
	<div id="tabTwo" class="tab-content">
		<img src="https://cdn.pixabay.com/photo/2018/02/08/22/27/flower-3140492_960_720.jpg" height="200"/>
	</div>
	
	<div id="tabThree" class="tab-content">
		<img src="https://cdn.pixabay.com/photo/2016/05/05/02/37/sunset-1373171_960_720.jpg" height="200"/>
	</div>
</div>

Answer 5

Вы можете сделать это также без JS

.img {
  display: none;
  position: absolute;
  top: 28px;
}

input:checked + .img {
  display: block;
}

<label for="radio1">Image 1</label>
<input id="radio1" type="radio" name="img" checked>
<div class="img">
  1
</div>
<label for="radio2">Image 2</label>
<input id="radio2" type="radio" name="img">
<div class="img">
  2
</div>

Но .img должен оставаться сразу после радиовхода.

Или более общая версия JS, которая работает независимо от количества изображений

document.querySelectorAll(".imageSelection").forEach(el => {
  el.onclick = event => {
    const id = event.target.dataset.imageToShow
    document.querySelectorAll(".img").forEach(img => { img.style.display = "none" })
    document.getElementById(id).style.display = "block"
  }
})

<label for="radio1">Image 1</label>
<input id="radio1" type="radio" name="img" class="imageSelection" checked data-image-to-show="img1">

<label for="radio2">Image 2</label>
<input id="radio2" type="radio" name="img" class="imageSelection" data-image-to-show="img2">


<div class="img" id="img1">
  1
</div>
<div class="img" id="img2" style="display: none">
  2
</div>

Answer 6

Попробуйте этот код. Это будет работать для Вас.

 function img(x){
    if(x==0){
      document.getElementById('img2').style.display='none';
      document.getElementById('img1').style.display='block';
    }
    else{
      document.getElementById('img1').style.display='none';
      document.getElementById('img2').style.display='block';
    }
    return;
  }

<input type="radio" name="img1" onclick="img(0)" checked>Image 1
<input type="radio" name="img1" onclick="img(1)">Image 2

<div id="img1">
 <img src="https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" />
  <!-- insert image -->
</div>
<div id="img2" style="display:none">
 <img src="https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"/>
  <!-- insert image -->
</div>

Answer 7

Попробуйте это:

    <input type="radio" name="img" value="img1"  onclick="img(0)"  checked> img 1<br>
      <input type="radio" name="img" value="img2"  onclick="img(1)" > img 2<br>

    <div id="img1">
      jfdhgjfd
    </div>
    <div id="img2" style="display:none;">
     gfdgfd
    </div>


    <script>
      function img(x){
        if(x==0){
          document.getElementById('img2').style.display='none';
          document.getElementById('img1').style.display='block';
        }
        else{
          document.getElementById('img1').style.display='none';
          document.getElementById('img2').style.display='block';
        }
        return;
      }
    </script>

Answer 8

Радиогруппа должна иметь одно и то же имя (значение атрибута name) для обработки в качестве группы.

Попробуйте запустить приведенный ниже фрагмент:

function img(x) {
  if (x == 0) {
    document.getElementById('img2').style.display = 'none';
    document.getElementById('img1').style.display = 'block';
  } else {
    document.getElementById('img1').style.display = 'none';
    document.getElementById('img2').style.display = 'block';
  }
}

    <input type="radio" name="img" onclick="img(0)" checked>Image 1
    <input type="radio" name="img" onclick="img(1)">Image 2

    <div id="img1">
        1
    </div>
    <div id="img2" style="display: none;">
        2
    </div>