用coffeescript删除课程

Question

I want to remove the hidden class if the screen size reaches a certain size with coffeescript. Here is my current code:

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

You do not need JS to do that, CSS would be enough, something like this should work:

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;
   }
}

Here is an example JS bin

Answer 2

You need to tell the removeClass function from which element the class should be removed. So if you want to remove the hidden-class from all elements that currently have that class you can write

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

However, you won't be able to select all those elements again if the screensize goes back to above 768px. To be able to do that you can add a can-be-hidden class to those elements. So your HTML would be

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

and the JS

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

PS removeClass '.hidden' will look for elements like <p class=".hidden"> , not <p class="hidden"> so better don't use a dot here