Как мне «переопределить» jQuery (окно) .resize (checkSize)? - PullRequest
Новая
       8

Как мне «переопределить» jQuery (окно) .resize (checkSize)?

0 голосов
/ 04 июня 2019

Я пытаюсь добавлять и удалять классы в зависимости от правила CSS для экранов размером 500px и меньше. В CSS я использую 

@media (max-width: 500px) {
.evidence img {display:none;}
}

и эта функция jQuery ищет этот CSS, добавляет и удаляет классы: 

jQuery(document).ready(function() {
checkSize();
jQuery(window).resize(checkSize);
function checkSize(){
if (jQuery(".page-template .evidence img").css("display") == "none"){
jQuery( ".page-template .evidence .two-col").addClass("left").removeClass("two-col");
jQuery( ".page-template .evidence .right").addClass("left").removeClass("right");
} }
});

Проблема в том, что когда я изменяю размер окна более чем на 500 пикселей, правило jQuery не «обновляется» и снова не читает классы и правила CSS.

Я пытался "повернуть" их, т. Е. С

.evidence img {display:block;}

и 

if (jQuery(".page-template .evidence-cards img").css("display") == "block"){
jQuery( ".page-template .evidence .two-col").addClass("two-col").removeClass("left");
jQuery( ".page-template .evidence .right").addClass("right").removeClass("left");
} }

Есть идеи? Как я могу заставить jQuery(window).resize(checkSize); снова стрелять?

Редактировать 6/05/19

re: ответ Даниэля Бека, ключевой момент состоял в том, что классы меняются и больше не существуют, чтобы идентифицировать div при изменении размера> 500px. Я не могу изменить классы на идентификаторы, но я добавил дополнительные классы (которые не вызываются в таблице стилей), которые остаются статичными, то есть .change-two-col, .change-right. Это работает: 

jQuery(document).ready(function() {
function checkSize() {
  if (jQuery(".page-template .evidence img").css("display") == "none") {
    jQuery(".page-template .evidence .change-two-col").addClass("left").removeClass("two-col");
    jQuery(".page-template .evidence .change-right").addClass("left").removeClass("right");
  } else {
    jQuery(".page-template .evidence .change-two-col").addClass("two-col").removeClass("left");
    jQuery(".page-template .evidence .change-right").addClass("right").removeClass("left");
  }
}
checkSize();
jQuery(window).resize(checkSize);
});

1 Ответ

1 голос
/ 04 июня 2019

Проблема не в том, что функция не срабатывает - изменение размера срабатывает непрерывно при изменении размера окна, а в том, что функция вносит только односторонние изменения в DOM;он никогда не пытается обработать случай, когда изображение является видимым.

Вы также теряете отслеживание того, какой элемент является каким: тогда страница шириной менее 500 пикселей, вы удаляете идентифицирующие имена классов в обоих div и заменяетеих с «.left», поэтому, когда размер окна увеличивается до большего размера, вы больше не можете сопоставлять отдельные элементы, используя оригинальные имена классов.Один из способов исправить это - добавить уникальные имена классов (или, что лучше, идентификаторы) к элементам, которые не изменят , поэтому вы можете использовать их для идентификации элементов: 

function checkSize() {
  if (jQuery(".page-template .evidence img").css("display") == "none") {
    jQuery("#foo").addClass("left").removeClass("two-col");
    jQuery("#bar").addClass("left").removeClass("right");
  } else {
    jQuery("#foo").removeClass("left").addClass("two-col");
    jQuery("#bar").addClass("right").removeClass("left");
  }
}

checkSize();
jQuery(window).resize(checkSize);
@media (max-width: 500px) {
  .evidence img {
    display: none;
  }
}

.two-col {
  background-color: red
}

.left {
  background-color: blue
}

.right {
  background-color: green
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="page-template">
  <div class="evidence">
    <img src="https://placehold.it/100x100">
    <div id="foo" class="two-col">two-col</div>
    <div id="bar" class="right">right</div>
  </div>
</div>

(Вероятно, также стоит отметить, что вам будет гораздо лучше справляться со всеми этими задачами с помощью медиазапросов, а не переключать имена классов в javascript;все, что может быть сделано путем добавления или удаления классов, может обрабатываться с помощью медиа-запросов.)

...