0

基本上我已经有一段可以为下拉菜单设置动画的咖啡脚本：

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

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

我想将它与添加到购物车按钮操作联系起来，以便在用户添加到他们的购物车时发生菜单 slideDown/slideUp 序列，这是 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>

任何建议都非常感谢，在此先感谢！

4

2 回答 2

1

您可以在 Coffeescript 文件中使用 jQuery 委托事件。例如，要在触发前显示菜单 500 毫秒menu_out：

$(document).on 'click', '#add-to-cart-button', (event) ->
  menu_in()
  setTimeout 500, menu_out
于 2013-07-25T23:52:58.283 回答
0

由于 CoffeeScript 将您的代码放在一个闭包中，您需要手动将全局变量附加到窗口，例如window.menu_in = -> ...

于 2013-07-25T23:41:38.987 回答