Как мне закрыть это диалоговое окно с помощью jQuery? С помощью Coffeescript?

#javascript #jquery #ruby-on-rails #ruby-on-rails-3 #coffeescript

Вопрос:

Я собираю новое приложение и, хотя я обычно использую jQuery для подобных вещей, я хотел бы сравнить его с Coffeescript и выбрать правильный подход. Кроме того, я хочу убедиться, что понимаю, как правильно вызывать jQuery с помощью coffeescript.

Диалоговое окно находится в следующем div:

 <div class="alert-message error">
  <a class="close" href="#">X</a>
  <p>Here is some error text</p>
</div>

Стиль помещает «X» на правый край диалогового окна. Когда пользователь нажимает на «X», весь div должен исчезнуть.

Какой код jQuery или код Coffescript я бы использовал для закрытия диалогового окна? Это диалоговое окно может появиться на любой странице сайта.

Ответ №1:

Попробуйте это:

 $('.close').click(function(){
  $(this).parent().hide(); //finds parent element of clicked .close and hides it
});

1. Спасибо! Определенно работает. Я тоже надеялся на эквивалентный coffesscript — кто-нибудь?

2. @Kevin Все, что вам нужно сделать, чтобы использовать CoffeeScript, это заменить function на -> и убрать { фигурные скобки } . Правило № 1 CoffeeScript — «Это просто JavaScript». 🙂

3. @Trevor Спасибо. Я действительно сделал именно это и разобрался с этим. Это был простой пример, я действительно надеялся, что увижу разные примеры подходов coffeescript. [кстати — не могли бы вы связаться со мной через мой Twitter?]

Ответ №2:

Вот код samura с использованием coffeescript

 $('.close').click() ->
    $(this).parent().hide()

// or on 1 line
$('.close').click() -> $(this).parent().hide()

// fat arrow version, not 100% sure on this, typing from ipad
$('.close').click(e) => $(e.target).parent().hide()

http://jashkenas.github.com/coffee-script/

1. Я смог заставить это работать только после добавления ведущего ‘jQuery -> ‘ в начало вашей первой строки. Итак, одна строка будет: jQuery -> $(«.close»).click -> $(this).parent().hide()

2. @Kevin Тогда это будет в равной степени справедливо и для версии JS. Использование jQuery -> (или, что эквивалентно, $ -> … если вы не делаете что-то необычное, вы обнаружите, что $ == jQuery ) просто гарантирует, что ваш код выполняется после загрузки DOM, так что .close элементы из HTML вашей страницы существуют, когда вы делаете $('.close') выбор.