我如何 "refire" jQuery(window).resize(checkSize)？

Question

我正在尝试根据 CSS 规则为 500 像素及更小的屏幕添加和删除类。在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");
} }
});

问题是当我将 window 的大小调整到超过 500px 时，jQuery 规则不会 "refire" 并阅读 CSS 类再次统治。

我已经尝试 "reverse" 他们，即

.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); 再次开火？

编辑 2019 年 6 月 5 日

回复：Daniel Beck 的回答，关键是类发生变化并且在调整大小 >500px 时不再用于识别 div。我无法将类更改为 ID，但我添加了其他保持静态的类（未在样式表中调用），即 .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);
});

Answer 1

问题不在于函数没有触发——每当 window 调整大小时调整大小都会连续触发——问题在于函数只对 [=28= 进行 one-way 更改];它从不尝试处理图像可见的情况。

你也忘记了哪个元素是哪个：然后页面宽度小于 500px，你删除两个 div 上的标识类名并将它们替换为“.left”，所以当 window 调整为更大的尺寸，您将无法再使用原始类名匹配各个元素。解决此问题的一种方法是向不会更改的元素添加唯一的类名（或更好的 ID），因此您可以使用它们来识别元素：

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 中切换类名来处理所有这些可能会更好；任何可以通过添加或删除类可以通过媒体查询来处理。）

我如何 "refire" jQuery(window).resize(checkSize)？

How do I "refire" jQuery(window).resize(checkSize)?

javascript

css

jquery

media-queries