文章/答案/技术大牛

发布

社区首页 >问答首页 >如何通过点击图像传递属性数据？

问如何通过点击图像传递属性数据？
EN

Stack Overflow用户

提问于 2016-05-04 21:18:53

回答 1查看 110关注 0票数 1

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

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

ruby-on-rails

ruby

回答 1

Stack Overflow用户

回答已采纳

发布于 2016-05-04 21:39:19

通常，您可以使用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值传输到上面。您甚至可以添加类信息，以使选定的图像看起来不同，这取决于您自己。

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/37038221

复制

相似问题

问如何通过点击图像传递属性数据？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何通过点击图像传递属性数据？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何通过点击图像传递属性数据？
EN