Question

我正在尝试根据500像素或更小的屏幕的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");
} }
});

问题是当我将窗口的大小调整为500px以上时，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);再次开火？

编辑19/05/29

re：丹尼尔·贝克（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进行了单向更改；它永远不会尝试处理图像可见的情况。

您还将失去对哪个元素的跟踪：然后页面的宽度小于500px，在两个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中切换类名来处理所有这些问题；通过添加或删除类可以完成的任何操作都可以通过媒体查询来处理。）

如何“重新启用” jQuery（window）.resize（checkSize）？

1 个答案: