用coffeescript刪除課程

Question

如果屏幕尺寸達到了帶有CoffeeScript的特定尺寸，我想刪除隱藏的類。 這是我當前的代碼：

咖啡腳本：

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

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

PS removeClass '.hidden'將查找類似<p class=".hidden">元素，而不是<p class="hidden">因此最好不要在此處使用點