Question

如何通过单击图像传递属性数据：

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

尝试基于@Tadman

1

  <%= 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') %>

2

  <%= 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') %>

3

  <%= 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值转移过来。您甚至可以添加课程信息，以使选定的图像在您之后看起来与众不同。

如何通过点击图片传递属性数据？

1 个答案: