0

いくつかの異なる製品をリストする製品ページがあります。製品のメイン画像をクリックすると、ポップアップ/ライトボックスにその製品の別の画像と追加情報が表示されます。

ただし、クリック イベントは最初の製品に対してのみ機能します。

$(document).ready ->
 i = $(".main-image").attr("data-productid")
 button = $("#single_" + i)
 button.on "click", ->
  $("#product_popup").show()

html/erb:

<% products.each do |product| %>
<% if product.on_display? %>
  <div class="grid_1">
  <li id="product_<%= product.id %>" class="columns product three <%= cycle("alpha", "secondary", "", "omega secondary", :name => "classes") %>" data-hook="products_list_item" itemscope itemtype="http://schema.org/Product">
    <div class="main-image" id="single_<%= product.id %>" data-productid="<%= product.id %>">
      <%= large_image(product, :itemprop => "image", :class => "product-image", :id => product.id) %>
    </div><!-- main-image-->
    <%# ******LIGHTBOX******* %>
    <div id="product_popup">
        <%= large_image(product, :itemprop => "image", :class => "product-image") %>
    </div><!-- product_popup -->

助けてくれてありがとう。それは有り難いです。

4

1 に答える 1

0

これを試して

jQuery ->
  $(".main-image").each () ->
    i = $(this).attr("data-productid")
    $("#single_" + i).on "click", ->
      $("#product_popup").show()

それぞれを.main-imageセレクターで呼び出す必要があるため、それぞれの中のコードは、それぞれのdiv.main-imageに対して実行されます。それぞれの内部の$（this）に注意してください。これは、各ループの各反復中の各divに関連します。

このようにリファクタリングできると思います（最初に上記のソリューションを試して、機能していることを確認してください）

jQuery ->
  $("div.main-image").on "click", ->
    $("div#product_popup").show()
于 2013-03-20T02:11:42.307 に答える