使用 coffeescript 删除 class

Question

如果屏幕尺寸达到特定尺寸，我想用 coffeescript 删除隐藏的 class。这是我当前的代码：

咖啡脚本：

$(window).resize "form.edit_customization", (event) =>
  if $(window).width() <= 768
    removeClass '.hidden'

HTML:

<p class="hidden">Please use desktop or larger display when editing an event</p>

Answer 1

您需要告诉 removeClass 函数应该从哪个元素中删除 class。因此，如果您想从当前具有 class 的所有元素中删除 hidden-class，您可以编写

$(".hidden").removeClass "hidden"

但是，如果屏幕尺寸回到 768 像素以上，您将无法再次 select 所有这些元素。为此，您可以向这些元素添加 can-be-hidden class。所以你的 HTML 会是

<p class="hidden can-be-hidden">Lorem Ipsum</p>

和 JS

if $(window).width() <= 768
  $(".can-be-hidden").removeClass 'hidden'
else
  $(".can-be-hidden").addClass 'hidden'

P.S。 removeClass '.hidden' 会寻找像 <p class=".hidden"> 这样的元素，而不是 <p class="hidden"> 所以最好不要在这里使用点

Answer 2

你不需要 JS 来做到这一点，CSS 就足够了，像这样的东西应该可以工作：

HTML:

<p class="small-screen-message">Please use desktop or larger display when editing an event</p>

CSS:

.small-screen-message {
  display: none;
}

@media (max-width: 768px) {
  .small-screen-message {
    display: inline;
   }
}

这是一个例子JS bin