參考在一個單獨的JS文件的CoffeeScript事件

基本上我已經有一段CoffeeScript中的那個動畫下拉菜單：參考在一個單獨的JS文件的CoffeeScript事件

menu_in = -> $('.cart_pulldown').slideDown(250) 
menu_out = -> $('.cart_pulldown').slideU(150) 

$('#store_menu').hoverIntent(over: menu_in, out: menu_out, timeout: 150)

而且我想，以配合這加載到購物車按鈕操作這樣，當用戶添加到其購物車中的菜單了slideDown /效果基本show序列發生了，那繼承人的JS代碼：

function set_product_page_variant_state() { 
var varel = $('div#product-social-links'); 
var cart_link = $("#add-to-cart-button"); 
if(varel && cart_link) { 
    if(variant_id = varel.attr('data-variant-id')) { 
    $.post('/flash_sales/get_state.json', {'variant_ids[]': [variant_id]}, function(data) { 
     var state = data[variant_id]; 
     if(state) { 
     if(state=='on_hold') { 
      cart_link.text("On Hold").show(); 
     } else if(state=='in_my_cart') { 
      // TODO: this is funking ugly and slow to load, this whole thing needs a good old fashion refactorin'. 
      cart_link.text("In My Cart") 
      .hide() 
      .after("<a href='/cart' class='action-button add_to_cart' id='#add-to-cart-button'>In My Cart</a>") 
      .remove() 
     } else if(state=='available') { 
      cart_link.removeAttr('disabled').show(); 
     } else if(state=='sold_out') { 
      cart_link.text("Sold Out").show() 
     } else { 
     // something went wrong, enable the button 
      cart_link.removeAttr('disabled').show() 
     } 
     } else { cart_link.removeAttr('disabled').show() } 
    }); 
    } else { cart_link.removeAttr('disabled').show() } 
} 
}

，只是要徹底，這裏是相關的HTML：

<div id="cart-form"> 
        <%= form_for :order, :url => spree.populate_orders_url do |f| %> 
        <div id="inside-product-cart-form" itemprop="offers" itemscope itemtype="http://schema.org/Offer"> 
         <% if @product.price %> 
         <div> 
          <div class="add-to-cart"> 
          <%= hidden_field_tag "variants[#{@variant.id}]", 1 %> 
          <%= button_tag "Add to Cart", :class => "hidden action-button add_to_cart", :type => :submit, :disabled => true, :id => "add-to-cart-button" %> 
          </div> 
         </div> 
         <% end %> 
        </div> 
        <% end %> 
       </div>

任何意見非常感謝，提前致謝！

來源

2013-07-25 m_p

你可以在你的CoffeeScript文件中使用jQuery委託的事件。例如，要在觸發前顯示500ms的菜單menu_out：

$(document).on 'click', '#add-to-cart-button', (event) -> 
    menu_in() 
    setTimeout 500, menu_out

來源

2013-07-25 23:52:58 BenjaminCorey

觸發器，我需要做一些除了呼叫： menu_in menu_out –

你需要爲第二次調用setTimeout。更新了上面的代碼以反映這一點。 – BenjaminCorey

由於CoffeeScript的把你的代碼，你需要全局變量手動附加到窗口的關閉，像window.menu_in = -> ...

來源

2013-07-25 23:41:38 tom

我不確定我明白你的意思，你能指定更多一點嗎？ –

參考在一個單獨的JS文件的CoffeeScript事件

回答

相關問題