Показать сообщение отдельно
  #6 (permalink)  
Старый 24.06.2017, 22:41
Профессор
Отправить личное сообщение для DivMan Посмотреть профиль Найти все сообщения от DivMan
 
Регистрация: 08.03.2016
Сообщений: 429

А вот так, скрывает все элементы, но почему-то самый первый не скрывает

<style>
.hidden {
  display: none;
}

.img {
  width: 200px;
  height: 200px;
}

.img1 {background: green;}
.img2 {background: blue;}
.img3 {background: red;}
</style>

<input type="text" class="input">

<div class="img img1 hidden"></div>
<div class="img img2 hidden"></div>
<div class="img img3 hidden"></div>

<script>
var input =  document.querySelector('.input');

var img = document.querySelectorAll('.img');

var arr = [];
img.forEach(function(el, i) {
  arr.push(i);
 })
 
 console.log(arr)
 

input.oninput = function() {
 console.log(img[Number(input.value)])
	img.forEach(function(element, i) {
  
  if(arr.indexOf(Number(input.value)) != -1) {      	      img[Number(input.value)].classList.remove('hidden');
    } 
  	if(input.value === '') { 
    	element.classList.add('hidden'); 
      
     } 
    
 
  })
}
</script>
Ответить с цитированием