使用咖啡脚本删除类

Question

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

咖啡脚本：

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

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