イメージをクリックして属性データを渡す方法は？

Question

どの画像をクリックすることで属性データを渡すために：

# Something like this I would imagine 
<%= f.select '1.png', ranking: 1 %> 
# or 
<%= f.image_tag '1.png', ranking: 1 %> 

@Tadman

<%= f.hidden_field(:ranking, id: 'ranking') %> 
    <%= image_tag('1.png', data: { rank: 1 }, class: 'image-clicker') %> 
    <%= image_tag('2.png', data: { rank: 2 }, class: 'image-clicker') %> 
    <%= image_tag('3.png', data: { rank: 3 }, class: 'image-clicker') %> 
    <%= image_tag('4.png', data: { rank: 4 }, class: 'image-clicker') %> 

<%= f.hidden_field(:ranking, id: 'image_ranking') %> 
    <%= image_tag('1.png', data: { image_ranking: 1 }, class: 'image-clicker') %> 
    <%= image_tag('2.png', data: { image_ranking: 2 }, class: 'image-clicker') %> 
    <%= image_tag('3.png', data: { image_ranking: 3 }, class: 'image-clicker') %> 
    <%= image_tag('4.png', data: { image_ranking: 4 }, class: 'image-clicker') %> 

基づく試み

<%= f.hidden_field(:image_ranking, id: 'image_ranking') %> 
    <%= image_tag('1.png', data: { ranking: 1 }, class: 'image-clicker') %> 
    <%= image_tag('2.png', data: { ranking: 2 }, class: 'image-clicker') %> 
    <%= image_tag('3.png', data: { ranking: 3 }, class: 'image-clicker') %> 
    <%= image_tag('4.png', data: { ranking: 4 }, class: 'image-clicker') %> 

Answer 1

は、通常は、Railsので利用可能な控えめなJavaScriptでこれを行う：

<%= f.hidden_field(:image_ident, id: 'image_ident') %> 
<%= image_tag('1.png', data: { ident: 1 }, class: 'img-clicker') %> 

その後、あなたはjQueryを使ってそれをトリガすることができます：ここ

$('.img-clicker').click(function() { 
    $('#image_ident').val($(this).data('ident')); 
}); 

アイデアは、あなたがに隠されたフィールドを持つことができています選択した画像をキャプチャし、クリックするとdataの値を転送します。その後、クラス情報を追加して、選択したイメージを後で異なるように表示することもできます。