Как показать/скрыть блок при совпадении нескольких условий?

Question

[Сергей]

Есть несколько полей ввода чисел и блок:

<input type="number" min="10" max="20" placeholder="10">
<input type="number" min="5" max="10" placeholder="5">
<input type="number" min="7" max="15" placeholder="7">
<div class="block">Hello, world!</div>

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

Answer 1

[hzzzzl]

let hideBlock = true

document.querySelectorAll('input')
	.forEach(input => {
		// console.log(input.min, input.max, input.value)
		if (input.value && +input.value > +input.min) 
			hideBlock = false
	})
 
if (hideBlock) {
	document.querySelector('.block').style.display = 'none'
} else {
	document.querySelector('.block').style.display = 'block'
}

Comments

[Alams Stoyne]

я бы еще дополнил срабатывание на событие изменения поля

[Сергей]

Мне кажется, надо копать в сторону метода every.

[hzzzzl]

тогда уж .some , если проверять что "хотя бы один имеет значение"

const show = [...document.querySelectorAll('input')]
  .some(input => input.value && +input.value > +input.min)

Answer 2

[0xD34F]

const block = document.querySelector('.block');
const inputSelector = 'input[type="number"]';

const toggleBlock = () =>
  block.style.display = Array
    .from(document.querySelectorAll(inputSelector))
    .some(n => n.value && +n.value > +n.min)
      ? 'block'
      : 'none';

document.addEventListener('input', e => e.target.matches(inputSelector) && toggleBlock());
toggleBlock();

// или

const inputs = document.querySelectorAll(inputSelector);
const toggleBlock = () =>
  block.hidden = Array.prototype.every.call(
    inputs,
    n => !n.value || +n.value <= +n.min
  );

inputs.forEach(n => n.addEventListener('input', toggleBlock));
toggleBlock();

Comments

[Сергей]

Ещё вопрос вдогонку. Пытаюсь переписать данный код на JQuery. Я так понимаю, аналог метода .some в JQuery это .map(), но он возвращает вот это: w.fn.init(2) [false, true, prevObject: w.fn.init(2)]. Как получить булево значение?

[0xD34F]

Сергей,

Я так понимаю, аналог метода .some в JQuery это .map

Не аналог. Откройте документацию, и почитайте, что такое some, и что такое jquery map.

Как получить булево значение?

Точно так же - с помощью some. Превратить набор элементов, возвращаемый jquery, в массив можно с помощью методов toArray или get.

[Сергей]

Спасибо. Как раз воспользовался методом .get().