Javascript 无法识别的表达式:。fancybox_#

Javascript 无法识别的表达式:。fancybox_#,javascript,jquery,ruby-on-rails,typescript,fancybox,Javascript,Jquery,Ruby On Rails,Typescript,Fancybox,我有图像视图,在图像上单击我需要打开fancybox 这是我的查看代码 <%= form_tag front_check_path(@search), remote: true, class: "step_1_hotel_form", "data-price" => currency.raw_amount(itineraries[0].price_obj[:sales_price]), "data-price_per_pax" =&

我有图像视图,在图像上单击我需要打开fancybox

这是我的查看代码

<%= form_tag front_check_path(@search), remote: true, class: "step_1_hotel_form",
             "data-price" => currency.raw_amount(itineraries[0].price_obj[:sales_price]),
             "data-price_per_pax" => currency.raw_amount(itineraries[0].price_obj[:sales_price]/@search.count_passengers_object[:total]),
             "data-price_part" => currency.raw_amount(itineraries[0].price_obj[:annuity_sales_price]) do %>
  <div class="hotel_result">
    <div class="image_wrap">
      <a class="fancybox_<%= hotel.id %> thumb_a" href="<%= hotel.pictures.first['url'] %>">
        <div class="image">
          <%= image_tag 'shared/ajax-loader_white.gif', realsrc: hotel.pictures.first['url'], class: 'thumb', alt: hotel.pictures.first['description'] %>
        </div>
      </a>

      <div class="other_images">
        <% hotel.pictures.each do |hr_pic| %>
          <div class="small_image">
            <a class="fancybox_<%= hotel.id %>" href="<%= hr_pic['url'] %>">
              <%= image_tag 'shared/ajax-loader_white.gif', realsrc: hr_pic['url'], class: 'small_thumb', alt: hr_pic['description'], style: 'display: none;' %>
            </a>
          </div>
        <% end %>
      </div>
    </div>

    <div class="information">
      <div class="name_group">
        <div class="name"><%= popup_ajax hotel.name, hotel_info_path(hotel) %></div>
        <div class="rating">
          <% 1.upto(hotel.rating).each do %>
            <%= image_tag 'shared/star.png', fetch_format: :auto %>
          <% end %>
        </div>
        <div class="address">
          <%= popup_ajax_do hotel_map_path(hotel) do %>
            <%= hotel.address %><%= image_tag 'shared/map_view.png' %>
          <% end %>
        </div>
      </div>

      <div class="price-box-hotel">
        <% if itineraries[0].price_obj[:annuity_sales_price] %>
          <div class="resurs">
            <%= popup_ajax_do payment_annuity_description_path((itineraries[0].price_obj[:sales_price] * 100).to_i) do %>
              <div class="resurs_text"><%= _('Delbetala fr.') %></div>
              <div class="resurs_price"><%= _('%{amount}/mån') % { amount: currency.amount(itineraries[0].price_obj[:annuity_sales_price]) } %></div>
            <% end %>
          </div>
        <% end %>

        <div class="pax-price">
          <div class="price"><%= currency.amount(currency.raw_amount(itineraries[0].price_obj[:sales_price]) / @search.count_passengers_object[:total]) %></div>
          <div class="smallprice"><%= _('per person') %></div>
        </div>

        <div class="total-price">
          <div class="price"><%= currency.amount(itineraries[0].price_obj[:sales_price]) %></div>
          <% if @search.search_type == 'package' %>
            <div class="smallprice"><%= _('totalt flyg+hotell') %></div>
          <% else %>
            <div class="smallprice"><%= _('totalt') %></div>
          <% end %>
        </div>
      </div>
      <div class="hotel_clear"></div>
      <div class="description">
        <% tripdata = @tripadvisor_data[hotel.unique_id] if @tripadvisor_data && @tripadvisor_data[hotel.unique_id] %>
        <% tripdata = hotel.tripadvisor_data if !tripdata %>
        <% if tripdata %>
          <div class="tripadvisor">
            <%= _('TripAdvisor-betyg') %>
            <div class="tripadvisor_image"><%= image_tag tripdata[:rating_image_url].gsub('http://', "//") if tripdata[:rating_image_url] %></div>
            <div class="tripadvisor_rating"><%= tripdata[:rating] %></div>
            <div class="tripadvisor_reviews"><%= _('Baserat på') %> <%= link_to tripdata[:web_url], target: '_blank' do %><%= tripdata[:num_reviews] %> <%= _('omdömen') %><% end %></div>
          </div>
        <% end %>

        <%= hotel.short_description_strip %> <%= popup_ajax _('Läs mer'), hotel_info_path(hotel) %>
      </div>

      <% if (@search.legs[0][4] && @search.legs[0][4] != @search.legs[0][2]) || (@search.legs[1][4] && @search.legs[1][4] != @search.legs[1][2]) %>
        <% nights = (itineraries[0].hotels.first[:checkout_date].to_date - itineraries[0].hotels.first[:checkin_date].to_date).to_i %>
        <div class="dates"><%= _('från %{origin} till %{dest}') % { origin: itineraries[0].hotels.first[:checkin_date].to_date.to_s(:short).downcase, dest: itineraries[0].hotels.first[:checkout_date].to_date.to_s(:short).downcase } %> (<%= n_("1 natt", "%{num} nätter", nights) % { num: nights } %>)</div>
      <% end %>

      <div class="rooms">
        <% 0.upto(@search.search_parameters[:rooms].size - 1).each do |room_i| %>
          <div class="room">
            <div class="headline"><%= _('Rum') %> <%= room_i + 1 %> <div class="pax-text">(<%= room_pax_text(@search, room_i + 1) %>)</div></div>
            <div class="options">
              <% used_hrs = [] %>
              <% itineraries.each_with_index do |i, index| %>
                <% next if used_hrs.include?("#{room_i}|#{i.hotels[room_i][:description]}|#{i.hotels[room_i][:boardtype]}") %>
                <% used_hrs << "#{room_i}|#{i.hotels[room_i][:description]}|#{i.hotels[room_i][:boardtype]}" %>
                <ul class="table <%= 'selected_hotel' if index == 0 %>">
                  <li class="radio">
                    <%= radio_button_tag "hr_#{hotel.id}_#{room_i + 1}", i.hotels[room_i][:uuid], (index == 0),
                                         "data-price" => currency.raw_amount(i.price_obj[:sales_price] - itineraries[0].price_obj[:sales_price]),
                                         "data-price_per_pax" => currency.raw_amount((i.price_obj[:sales_price] - itineraries[0].price_obj[:sales_price])/@search.count_passengers_object[:total]),
                                         "data-price_part" => currency.raw_amount(i.price_obj[:annuity_sales_price]) %>
                  </li>
                  <div class="table_div">
                    <li class="li_1"><%= i.hotels[room_i][:description] %></li>
                    <li class="li_2"><%= nice_boardtype(i.hotels[room_i][:boardtype]) %></li>
                    <li class="li_3"><%= currency.amount(i.price_obj[:sales_price] - itineraries[0].price_obj[:sales_price], add_plus: true, hide_unit: current_gate.supremecard?) %></li>
                  </div>
                </ul>
              <% end %>
            </div>
          </div>
        <% end %>
      </div>

      <div class="continue-button-hotel">
        <% unless current_gate.supremecard? && !supreme_open? %>
          <div class="spinner" id="step_1_<%= hotel.id %>_spinner" style="display: none;"><%= image_tag 'shared/ajax-loader_white.gif' %></div>
          <% if @search.search_type == 'package' %>
            <div class="y-button"><%= submit_tag _('Välj flyg + hotell: %{amount}') % { amount: currency.amount(itineraries[0].price_obj[:sales_price]) }, class: 'hotel' %></div>
          <% else %>
            <div class="y-button"><%= submit_tag _('Välj hotell: %{amount}') % { amount: currency.amount(itineraries[0].price_obj[:sales_price]) }, class: 'hotel' %></div>
          <% end %>
        <% end %>
      </div>
    </div>
  </div>
<% end %>
但是现在我在页面加载时出错了

语法错误,无法识别的表达式:.fancybox_35;{hotel.id}

我如何解决这个错误


感谢您的帮助。

$('.fancybox{hotel.id}')
不是有效的选择器。看起来您没有正确使用模板引擎(对不起,我不熟悉Ruby)

除非使用类似gem或类似技巧,否则无法将rails变量传递到javascript(资产)文件中。如果您的脚本非常简单,我认为您应该将其保留在html rails视图中
<%= javascript_tag "$('.fancybox_#{hotel.id}').attr('rel', 'gallery').fancybox({ prevEffect : 'none', nextEffect : 'none',  closeBtn : true, showNavArrows: true, beforeShow : function() { var alt = this.src; this.title = alt; }, helpers : { title : { type : 'inside' }} });" %>
$('.fancybox_#{hotel.id}').attr('data-fancybox', 'gallery').fancybox({ prevEffect : 'none', nextEffect : 'none',  closeBtn : true, arrows: true, beforeShow : function() { var alt = this.src; this.title = alt; }, helpers : { title : { type : 'inside' }} });