Question

I’m new to coffeescript, and while there is extensive information concerning the proper method of coding vanilla javascript in coffeescript, there is little information concerning how to code jQuery in coffeescript.

If someone could explain how to code the comma separated functions inside this jQuery hover event, as coffee script, it would be greatly appreciated.

$(".sprite-image.btn-rest").hover(
    function () {
        $(this).removeClass('btn-rest').addClass('btn-hover');
    },
    function () {
        $(this).removeClass('btn-hover').addClass('btn-rest');
        $(this).parent().prev().children('.sprite-image.btn-rest_before_activecurrent').removeClass('btn-rest_before_activecurrent').addClass('btn-rest');
        $(this).parent().prev('.sprite-image.nav_spacer_1-activecurrent').removeClass('nav_spacer_1-activecurrent').addClass('nav_spacer_1-rest');
    }
);

---

In response to the correct answer posted below by Larry Battle, I am posting the correction I made to Larry’s original coffeescript before he made his correction.

$('.sprite-image.btn-rest').hover ->
    $(this).removeClass('btn-rest').addClass 'btn-hover'
, ->
    $(this).removeClass('btn-hover').addClass 'btn-rest'
    $(this).parent().prev().children('.sprite-image.btn-rest_before_activecurrent').removeClass('btn-rest_before_activecurrent').addClass 'btn-rest'
    $(this).parent().prev('.sprite-image.nav_spacer_1-activecurrent').removeClass('nav_spacer_1-activecurrent').addClass 'nav_spacer_1-rest'

I’m curious because this coffeescript produced the same result as his corrected answer. My question: Is one better than the other?

Answer 1

I would just use js2coffee.org to check out what your javascript code would look like in coffeescript.

js2coffee.org translates your code to the following.

$(".sprite-image.btn-rest").hover (->
  $(this).removeClass("btn-rest").addClass "btn-hover"
), ->
  $(this).removeClass("btn-hover").addClass "btn-rest"
  $(this).parent().prev().children(".sprite-image.btn-rest_before_activecurrent").removeClass("btn-rest_before_activecurrent").addClass "btn-rest"
  $(this).parent().prev(".sprite-image.nav_spacer_1-activecurrent").removeClass("nav_spacer_1-activecurrent").addClass "nav_spacer_1-rest"

Update

js2coffee.org outputed incorrect code. Here’s the correct translation.

$(".sprite-image.btn-rest").hover(
    ->
        $(this).removeClass("btn-rest").addClass "btn-hover"
    ,->
        $(this).removeClass("btn-hover").addClass "btn-rest"
        $(this).parent().prev().children(".sprite-image.btn-rest_before_activecurrent").removeClass("btn-rest_before_activecurrent").addClass "btn-rest"
        $(this).parent().prev(".sprite-image.nav_spacer_1-activecurrent").removeClass("nav_spacer_1-activecurrent").addClass "nav_spacer_1-rest"
)