如何“重新启动”jQuery(窗口).resize(CheckSize)？

Question

我试图根据屏幕500 to和更小的CSS规则添加和删除类。在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 is时，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: Daniel的答案，关键是当类的大小调整到>500 re时，类会发生变化，不再存在以识别div。我不能将类更改为in，但是我添加了其他的类(样式表中没有调用这些类)，这些类是静态的，即.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

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

您还不知道哪个元素是哪个:然后页面的宽度小于500 no，删除两个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中切换类名；任何可以通过添加或删除类来完成的操作都可以通过媒体查询来处理。)