javascript - 我如何 "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");
} }
});

问题是当我将窗口大小调整到超过 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

回复: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

问题不在于该函数没有触发——只要窗口调整大小时resize就会连续触发——而是该函数只对DOM进行单向更改；它从不尝试处理图像可见的情况。

你也忘记了哪个元素是哪个:然后页面宽度小于 500 像素，你删除两个 div 上的标识类名并将它们替换为“.left”，所以当窗口调整到更大的尺寸时，您将无法再使用原始类名来匹配各个元素。解决此问题的一种方法是向不会更改的元素添加唯一的类名(或者，更好的是 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 中切换类名来处理所有这些可能会更好；任何可以通过添加或删除类来完成的事情都可以通过媒体查询来处理。 )