Скрыть div если value в нем 0

287

19 сентября 2017, 09:44

Привет!

Есть блок расчета, результат из него выводится в Html (span):

<div class="res">Вес одного <span id="result3"></span></div>
<div class="res">Общий вес <span id="result4"></span></div>
<div class="res">Сумма <span id="result5"></span></div>

Как скрыть div, если передаваемое в #result число: 0 или NaN ?

Answer 1

Если я все правильно понял, то реализовать можно как-то так:

/** 
 * Если значение внутри #result 
 */ 
let block_array = document.querySelectorAll(".res"); 
for (let i = 0; i < block_array.length; i++) { 
  let child = block_array[i].lastChild; 
  let value = +child.innerHTML; 
 
  if (value == 0 || isNaN(value)) { 
    block_array[i].classList.add("none"); 
  } else if (value > 0) { 
    block_array[i].classList.remove("none"); 
  } 
}

.none { 
  display: none 
}

<div class="res">Вес одного <span id="result0">0</span></div> 
<div class="res">Общий вес <span id="result4">4</span></div> 
<div class="res">Сумма <span id="resultNaN">NaN</span></div>

/** 
 * Если идет строго по ID 
 **/ 
let block_array_ = document.querySelectorAll("[id^=result]"); 
for (let i = 0; i < block_array_.length; i++) { 
  let id_value = block_array_[i].getAttribute("id").substr(6); 
  if (id_value == 0 || isNaN(id_value)) { 
    block_array_[i].parentNode.classList.add("none"); 
  } 
}

.none { 
  display: none; 
}

<div class="res">Вес одного <span id="result3">3</span></div> 
<div class="res">Общий вес <span id="result4">4</span></div> 
<div class="res">Сумма <span id="result0">0</span></div>

Answer 2

Самый простой способ, получаем все елементы с атрибутом id который начинается на result (селектор [id^="result"]), пробегаемся по ним, смотрим на что там заканчивается id , делаем выводы, скрываем нужные елементы.

document.addEventListener('DOMContentLoaded', function() { 
  document.querySelector('#btn').addEventListener('click', function() { 
    var divs = document.querySelectorAll('[id^="result"]'); 
    divs.forEach(function(div) { 
      var id = +div.id.substring(6); 
      if (isNaN(id) || id <= 0) { 
        div.parentElement.style.display = 'none'; 
      } 
    }); 
  }); 
});

.res { 
  border: solid 1px red; 
  height: 50px; 
  width: 50px; 
}

<div class="res"><span id="result3">3</span></div> 
<div class="res"><span id="result4">4</span></div> 
<div class="res"><span id="result5">5</span></div> 
<div class="res"><span id="result0">0</span></div> 
<div class="res"><span id="result-1">-1</span></div> 
<div class="res"><span id="resultNaN">NaN</span></div> 
 
<button id="btn">do the magic</button>