3

Подскажите как сделать вывод элементов только если data-from полностью совпадает, а не выше этого значения? То есть при значениях 100 будут одни элементы, а при значении 200 будут другие элементы, а не все вместе. Заранее спасибо за ответ

const num = document.getElementById('num');
const rng = document.getElementById('range');
const view = document.getElementById('view');
const goods = document.querySelectorAll('.good');
const set = val => {
  num.value = val;
  rng.value = val;
  view.textContent = val;
  [...goods].forEach(good => {
    const options = good.querySelectorAll('.option');
    [...options].forEach(option => {
      option.style.display = val >= +option.dataset.from ? 'block': 'none';
    });
  });
}

rng.addEventListener('input', () => set(rng.value));
num.addEventListener('change', () => set(num.value));
#view {
  display: block;
  text-align: center;
  font-size: 22pt;
}
.ctrl {
  width: 200px;
  position: relative;
}
input {
  display: block;
  width: 100%;
}
.good {
  display: inline-block;
  vertical-align: top;
  width: 100px;
  padding: 5px;
  margin: 5px;
  border: 1px solid silver;
}
.good .option {
  display: none;
}
<div class="ctrl">
  <span id="view">0</span>
  <input id="num" type=number min="0" max="1000" step="100" value="0">
  <input id="range" type="range" min="0" max="1000" step="100" value="0">
</div>
<div>
  <div class="good">
    <span>Good 1</span>
    <p class="option" data-from="100">Option 1</p>
    <p class="option" data-from="300">Option 2</p>
    <p class="option" data-from="700">Option 3</p>
  </div>
  <div class="good">
    <span>Good 2</span>
    <p class="option" data-from="100">Option 1</p>
    <p class="option" data-from="300">Option 2</p>
    <p class="option" data-from="700">Option 3</p>
  </div>
  <div class="good">
    <span>Good 3</span>
    <p class="option" data-from="100">Option 1</p>
    <p class="option" data-from="200">Option 2</p>
    <p class="option" data-from="1000">Option 3</p>
  </div>
</div>

1
  • Уточните, в чем затруднение - составить условие, или сделать вывод?
    – Kromster
    5 мая 2021 в 8:22

1 ответ 1

1

Исходя из требуемых условий, задача решается простой заменой оператора сравнения с >= на ==:

const num = document.getElementById('num');
const rng = document.getElementById('range');
const view = document.getElementById('view');
const goods = document.querySelectorAll('.good');
const set = val => {
  num.value = val;
  rng.value = val;
  view.textContent = val;
  [...goods].forEach(good => {
    const options = good.querySelectorAll('.option');
    [...options].forEach(option => {
      option.style.display = val == +option.dataset.from ? 'block': 'none';
    });
  });
}

rng.addEventListener('input', () => set(rng.value));
num.addEventListener('change', () => set(num.value));
#view {
  display: block;
  text-align: center;
  font-size: 22pt;
}
.ctrl {
  width: 200px;
  position: relative;
}
input {
  display: block;
  width: 100%;
}
.good {
  display: inline-block;
  vertical-align: top;
  width: 100px;
  padding: 5px;
  margin: 5px;
  border: 1px solid silver;
}
.good .option {
  display: none;
}
<div class="ctrl">
  <span id="view">0</span>
  <input id="num" type=number min="0" max="1000" step="100" value="0">
  <input id="range" type="range" min="0" max="1000" step="100" value="0">
</div>
<div>
  <div class="good">
    <span>Good 1</span>
    <p class="option" data-from="100">Option 1</p>
    <p class="option" data-from="300">Option 2</p>
    <p class="option" data-from="700">Option 3</p>
  </div>
  <div class="good">
    <span>Good 2</span>
    <p class="option" data-from="100">Option 1</p>
    <p class="option" data-from="300">Option 2</p>
    <p class="option" data-from="700">Option 3</p>
  </div>
  <div class="good">
    <span>Good 3</span>
    <p class="option" data-from="100">Option 1</p>
    <p class="option" data-from="200">Option 2</p>
    <p class="option" data-from="1000">Option 3</p>
  </div>
</div>

2
  • 1
    Cпасибо за помощь!
    – SergSergN
    5 мая 2021 в 9:29
  • @SergSergN Было бы очень хорошо к словам благодарности добавить автору ответа ещё и галочку-решение (ниже цифры у ответа) 5 мая 2021 в 14:30

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.