用coffeescript删除类

Question

如果屏幕大小与coffeescript达到一定大小，我想删除隐藏的类。这是我目前的代码：

CoffeeScript的：

$(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

你不需要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

的示例

Answer 2

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

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

但是，如果屏幕尺寸恢复到768px以上，您将无法再次选择所有这些元素。为此，您可以为这些元素添加can-be-hidden类。所以你的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">，所以最好不要在这里使用点