В чем ошибка скрипта jquery?

297

17 ноября 2017, 08:00

Задача: скрипт определяет высоту блока в зависимости от наличия отсутствия в теле body другого. Я использовал следующий вариант:

$("document").ready(function(){
 if(window.innerWidth > 500){
  if ($(".block").length) {
    $('#div1').css("height", "calc(100vh - 40px)");
    $('#div2').css("height", "calc(50vh - 40px)");
    }
else {
    $('#div1').css("height", "100vh");
    $('#div2').css("height", "50vh");
    }
 }
});

Браузер выводит только значение else. В чем проблема? HTML:

<body>
  <div class="block"></div>
  <div id="div1(или div2)"></div>
</body>

Answer 1

Скорее всего броузеры не понимают в атрибуте вот эту конструкцию

 calc(100vh - 40px)

Попробуй следующий код:

$("document").ready(function(){
 if(window.innerWidth > 500){
    var screenHeight = $(window).height();  
    var heightForDiv1 = (screenHeight - 40) + 'px';      
    var heightForDiv2 = (screenHeight/2 - 40) + 'px';   
    if ($(".block").length) {
        $('#div1').css("height", heightForDiv1);
        $('#div2').css("height", heightForDiv2);
    }
    else {
        $('#div1').css("height", "100vh");
        $('#div2').css("height", "50vh");
   }
 }
});

Если не сработает, то, видимо, ошибка в селекторе, который ты ищешь во втором условии: ".block". Ничего не имею против любых наименований в чужих проектах, но у какого-то элемента действительно класс "block"?))

Либо на момент отработки скрипта $(".block") еще не существует (эта коллекция, к примеру, появляется динамически).

Upd:

calc(100vh - 40px)

Это работает нормально.

Answer 2

Нормально работает ваш пример.

$(document).ready(function(){ 
 if(window.innerWidth > 500){ 
  if ($(".block").length) { 
    console.log('Условие срабатывает.'+' calc(100vh - 40px) и calc(50vh - 40px)'); 
    $('#div1').css("height", "calc(100vh - 40px)"); 
    $('#div2').css("height", "calc(50vh - 40px)"); 
    } 
  else { 
    console.log('Условие НЕ срабатывает. '+'height, 100vh и height, 50vh'); 
    $('#div1').css("height", "100vh"); 
    $('#div2').css("height", "50vh");          
  } 
 } 
});

#div1 { 
    background-color: rgb(244, 128, 36); 
    color: white; 
    font-weight: bold; 
    padding: 10px; 
} 
#div2 {    
    background-color: #45a163; 
    color: white; 
    font-weight: bold; 
    padding: 10px; 
} 
.block{ 
  text-align:center; 
}

<!DOCTYPE html> 
<html lang="en"> 
<head> 
  <meta charset="UTF-8"> 
  <title>Document</title> 
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
</head> 
<body> 
  <div class="block"> DIV BLOCK </div> 
  <div id="div1">DIV - 1  </div> 
  <div id="div2">DIV - 2  </div> 
</body> 
</html>