Img

[Keydol]

Нужно сделать поле для ввода. Если, например, туда пишешь "1", то появляется одна картинка, если "2", то другая и т.д.
Буду благодрен

[DivMan]

Самый худший вариант

https://jsfiddle.net/473m2b36/

 

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

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

.hidden {
  display: none;
}

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

.img1 {background: green;}
.img2 {background: blue;}
.img3 {background: red;}

var input =  document.querySelector('.input');

var img1 = document.querySelector('.img1');
var img2 = document.querySelector('.img2');
var img3 = document.querySelector('.img3');

input.oninput = function() {
	if(input.value == 1) {
  	img1.classList.toggle('hidden');
  }
  else if(input.value == 2) {
  	img2.classList.toggle('hidden');
  }
  else if(input.value == 3) {
  	img3.classList.toggle('hidden');
  }
  else {
  	img1.classList.add('hidden');
    img2.classList.add('hidden');
    img3.classList.add('hidden');
  }
}

 

[AlexZaw]

можно покороче, плюс тут любое кол-во картинок:

var input = document.querySelector('.input');

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

input.oninput = function () {
    for (var i = 0; i < images.length; i++) {
        if (input.value === "") {
            images[i].classList.add('hidden')
        } else {
            images[input.value - 1].classList.remove('hidden')
        }
    }
}

html и css тот же

Edited June 23, 2017 by AlexZaw

[DivMan]

Только для перебора массива, вместо for, советуют использовать foreach 

[AlexZaw]

1 час назад, DivMan сказал:

Только для перебора массива, вместо for, советуют использовать foreach 

при forEach придется еще с callback-ом заморачиваться, а оно нам для данной задачи надо?

[DivMan]

Не понимаю, почему, не работает такое условие 

if(input.value === '') { 
	img[i].classList.add('hidden'); 
} 

Приходится делать вот такое

if(input.value === '') { 
	img[0].classList.add('hidden'); 
    img[1].classList.add('hidden');
    img[2].classList.add('hidden');
} 

 

https://jsfiddle.net/jx1hkzt7/

По идеи вообще, должен работать блок else, но он почему-то не работает

 

else { 
    	img[i].classList.add('hidden'); 
      
     } 

 

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

if(input.value === '') { 
    	element.classList.add('hidden'); 
      
     } 

 

[AlexZaw]

подозреваю что именно из-за forEach и не работает,

у меня голова сейчас не варит, время 4 утра, но кажется логические условия не совсем правильные, точнее совсем неправильные 

ну ладно с этим 

  if(arr.indexOf(Number(input.value)) != -1) {
  	img[Number(input.value)].classList.remove('hidden');

проверяем не равен ли индекс массива -1 и убираем класс hidden  у картинки с нормальным индексом, хотя зачем мы делаем такую проверку совсем непонятно.

а вот здесь 

  	if(input.value === '') { 
    	img[0].classList.add('hidden'); 
      img[1].classList.add('hidden');
      img[2].classList.add('hidden');
     } 

img  от i работать и не будет так как i нам взять негде,

и даже если 

	img.forEach(function(element, i) 

интерпретатор понимает правильно, хотя в этом я не уверен (сам с forEach не работал поэтому могу и ошибаться), то i оттуда не передается, так как метод forEach нам ничего не возвращает

вот как то так

Edited June 24, 2017 by AlexZaw

[Alexandr37]

https://jsfiddle.net/c3eops2m/1/

[AlexZaw]

а если только с одним классом? без img1,img2,img3 ?

[Alexandr37]

https://jsfiddle.net/c3eops2m/2/

[AlexZaw]

ясно, т.е. работает точно также как простой цикл for, а в чем преимущество?

кстати если делать проверку введенного значения, то вместо (value <= 3) лучше сделать (value <= images.length)

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

[Alexandr37]

Немного короче + сразу можно передать callback

[Николя223]

1 час назад, AlexZaw сказал:

работает точно также как простой цикл for, а в чем преимущество?

он более новый.  

мы в этой теме с мистером @andrey7287 разбирались в этом 

 

[andrey7287]

Я в подобных ситуациях циклы в scss пишу. И на следующий день ( или через неделю ), когда клиент скажет ( скажет, не сомневайтесь ) : 'А добавьте ка ещё 3 картинки, 3 и 8 поменяйте местами и вместо 6ой установите вот эту' вы начнёте долго и мучительно ковырять свой шаблон, пытаясь разобраться где там какая картинка  а я просто переименую файлы так как требуется.

[AlexZaw]

можно поподробнее? как в таком случае правильно написать код?

[andrey7287]

.pic { 
	@for $i from 1 through 3 {
		&_#{$i} {
			background-image: url(img/img#{i}.jpg);
		}  	
	}
}

Как то так. Только такие вещи обычно без JS у меня работают, а в данном случае надо ещё проще поступить.

1. var i =  число из инпута

2. elem.style.backgroundImage = `url('img/name${i}.jpg')`;

[AlexZaw]

нда, до scss я еще не дорос

а вот второй вариант интересный

Edited June 25, 2017 by AlexZaw