Изменение css в jquery

377

12 декабря 2017, 21:30

Не происходит изменение css свойств у элементов при изменении размера окна. Собственно код на js. Если в функцию поставить alert('произошло изменение'), то работает.

$(window).on('resize', formCss()); 
 
function formCss() { 
  if($(window).width() > 839) {  
    $('#otdel-kachestva .mdc-layout-grid').css('display', 'grid').css('grid-column-gap', '50px'); 
    $('#otdel-kachestva .name-client').parent().css('grid-column-end', 'span 6'); 
    $('#otdel-kachestva .number-house').parent().css('grid-column-end', 'span 6'); 
  }  
  if (($(window).width() > 479) && ($(window).width() < 840)) { 
    $('#otdel-kachestva .mdc-layout-grid').css('display', 'grid').css('grid-column-gap', '50px'); 
    $('#otdel-kachestva .name-client').parent().css('grid-column-end', 'span 8'); 
    $('#otdel-kachestva .number-house').parent().css('grid-column-end', 'span 8'); 
  }  
  if($(window).width() < 479) { 
    $('#otdel-kachestva .mdc-layout-grid').css('display', 'grid').css('grid-column-gap', '50px'); 
    $('#otdel-kachestva .name-client').parent().css('grid-column-end', 'span 4'); 
    $('#otdel-kachestva .number-house').parent().css('grid-column-end', 'span 4'); 
  } 
}

Answer 1

Как бы начну с того, что прежде чем вызвать функцию formCss ее нужно объявить, а потом вызывать.

Функция (как и всякий объект) должна быть объявлена (определена, define) перед её использованием.

Ну и внутри во время вызова функции $(window).on('resize', formCss); круглые скобки не нужны. А так - работает вроде все.

function formCss() { 
  console.log('formCss'); 
  if ($(window).width() > 839) { 
    $('#otdel-kachestva .mdc-layout-grid').css('display', 'grid').css('grid-column-gap', '50px'); 
    $('#otdel-kachestva .name-client').parent().css('grid-column-end', 'span 6'); 
    $('#otdel-kachestva .number-house').parent().css('grid-column-end', 'span 6'); 
  } 
  if (($(window).width() > 479) && ($(window).width() < 840)) { 
    $('#otdel-kachestva .mdc-layout-grid').css('display', 'grid').css('grid-column-gap', '50px'); 
    $('#otdel-kachestva .name-client').parent().css('grid-column-end', 'span 8'); 
    $('#otdel-kachestva .number-house').parent().css('grid-column-end', 'span 8'); 
  } 
  if ($(window).width() < 479) { 
    $('#otdel-kachestva .mdc-layout-grid').css('display', 'grid').css('grid-column-gap', '50px'); 
    $('#otdel-kachestva .name-client').parent().css('grid-column-end', 'span 4'); 
    $('#otdel-kachestva .number-house').parent().css('grid-column-end', 'span 4'); 
  } 
} 
 
$(window).on('resize', formCss);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Будет полезно:

Объявление функций
Вызов функций

Answer 2

$(window).on('resize', formCss); 
 
function formCss() { 
  if($(window).width() > 839) {  
    $('#otdel-kachestva .mdc-layout-grid').css('display', 'grid').css('grid-column-gap', '50px'); 
    $('#otdel-kachestva .name-client').parent().css('grid-column-end', 'span 6'); 
    $('#otdel-kachestva .number-house').parent().css('grid-column-end', 'span 6'); 
  }  
  if (($(window).width() > 479) && ($(window).width() < 840)) { 
    $('#otdel-kachestva .mdc-layout-grid').css('display', 'grid').css('grid-column-gap', '50px'); 
    $('#otdel-kachestva .name-client').parent().css('grid-column-end', 'span 8'); 
    $('#otdel-kachestva .number-house').parent().css('grid-column-end', 'span 8'); 
  }  
  if($(window).width() < 479) { 
    $('#otdel-kachestva .mdc-layout-grid').css('display', 'grid').css('grid-column-gap', '50px'); 
    $('#otdel-kachestva .name-client').parent().css('grid-column-end', 'span 4'); 
    $('#otdel-kachestva .number-house').parent().css('grid-column-end', 'span 4'); 
  } 
}

Помогло!