Question

每个报价 @offers 有id和url。当用户点击其中一个div时，应该打开其id与div的id匹配的商品的网址：

@offers.each do |offer|
  <div id=< %=offer.id %>> ... </div>
<% end %>

当用户点击其中一个div时，我想将他发送到与商品ID相对应的网址。如何使用jquery或coffeescript执行此操作？

$( ".id_of_offer").click ->
  <<< send user to url of offer >>>

Answer 1

如果您真的只想将div链接到另一个页面，则应该简单地绕一个HTML超链接。这是最简单的方法。从HTML 5开始，您可以使用链接包装块元素。

<% @offers.each do |offer| %>
  <%= link_to(offer), id: 'offer-links' do %>
    <div id=<%= offer.id %>> ... </div>
  <% end %>
<% end %>

如果你想在你的JavaScript中执行更多的事情而不仅仅是链接，我仍然会将div包装成一个链接并阻止链接的JavaScript中的默认操作。这样做的一个优点是，即使用户已停用JavaScript，网站仍然可以正常运行。

$('#offer-links').click ->
  # some other stuff to do..
  true

您还应该记住，如果您使用Turbolinks，则应在page:load事件后注册此活动，否则它将无法正常工作。

Answer 2

使用jquery，它将类似于

$(".id_of_offer").click(function(){
  window.open($(this).attr("href"));
});

对于<a class="id_of_offer" href="url-of-offer"> - 就像没有必要在实际上具有url作为href值的anchor-tag上附加点击事件的事件处理程序一样。问题是您如何关联商品ID和网址 - 页面上是否有任何链接或是否存储在其他位置的网址？只是不确定你的问题的这一部分：“提供的网址，其id与div的id匹配” 您可以将URL作为数据属性存储在div上，例如那样：

<div id="id_of_offer" data-url="url_of_offer>..</div>

然后就像那样：

$("#id_of_offer").click(function(){
  window.open($(this).data("url"));
});

用于在新标签页中打开网址。如果要在当前窗口中打开网址，则为location.href = $(this).data("url");

更新：正如评论中所提到的，ID会即时创建。因此，这可以通过例如为每个div设置class =“offer”并将jquery更改为

$(".offer").click(function(){
  window.open($(this).data("url"));
});

参考：http://api.jquery.com/data/

Rails：OnClick事件在rails中打开url

2 个答案: