0

Birçok kayda sahip bir modelim var Painting. Hepsini yazdırıyorum ve her biri için jQuery eklemek istiyorum, böylece her bir Resmin üzerine tıklamak, Resmin büyük bir versiyonuna sahip bir kısmi sunacak.Bir kısayolun farklı sürümlerini, tıklattığım bir bloktaki öğeye göre nasıl oluşturabilirim?

<div id="viewer"></div> 
<% Painting.all.each_with_index do |painting, index| %> 
    <%= image_tag(painting.path, id:"painting"+index%> 
    <% @painting = painting %> 
    <script type="text/javascript"> 
     $("#painting<%=index%>").click(function() { 
      $("#viewer").html("<%= escape_javascript(render 'partial') %>"); 
     }); 
    </script> 
<%end%> 

_partial.html.erb

<%= image_tag(@painting.path, class:"large-painting") %> 
<!-- more code --> 

sorundur, değer @painting her döngü ile sıfırlanır ve sonunda son Resim eşittir. Hangi resme tıkladığım önemli değil, sonuncusu her zaman kısmi olarak işlenen olan olacaktır.

Her biri için ayrı bir jQuery yazmadan, Resminin üzerine tıklattığım Resme tekabül eden bir şekilde yazılmasını sağlamanın bir yolu var mı?

+0

Neden boyama için boyama yapıyorsunuz? Sadece kısmi 'render' kısmi 'kısmına aktarın, resim yapın: resim' ve sonra 'boyama' değişkenini kısmi olarak kullanın. – ddgd

cevap

1

Her resmin büyük halinin URL'sini görüntüde özel bir özellik olarak ekleyebilir, daha sonra Viewer tarafından başvurulan URL'yi, kullanıcının tıkladığı resim ile ilgili URL ile güncelleyebilir misiniz? gibi

şey:

$("#painting<%=index%>").click(function(){ 
    $(Viewer_Image_Element).prop('src', $(this).prop('custom_URL_property')) 
    }); 

Alternatif olarak, (mevcut bir kontrolör eylem ya da yeni bir yanıt) Yeni bir denetleyici eylem yaratabilecek kısmi görüntüyü render tepki verir. Bir kullanıcı bir resmi tıkladığında denetleyici eylemini çağırmak için $.ajax'u kullanabilir ve görüntü kimliğini istekle birlikte param olarak gönderebilirsiniz. Sunucu, paramiti kısmi olarak işlemek ve daha sonra cevabına geri göndermek için kullanacaktır. Ardından, html'yi görüntüleyiciye yerleştirin. Bu almak istediğiniz rota ise bazı örnek kod ekleyebilirim. Bu, kullanıcının, sayfayı ilk yüklediklerinde her görüntünün büyük bir sürümünü indirmesi gerekmediği anlamına da gelir anlamına gelir. Bu iyi bir şey olabilir veya olmayabilir.

İlgili konular