Question

我没有使用link_to标签来显示详细信息（请参阅下面的代码），而是希望整个列表项可以点击。

<ol class="list-group">
<% @users.each do |user| %>
    <li class="list-group-item clearfix">
        <h3 class="pull-right"><small class="text-uppercase">created </small><%= user.created_at.to_time %></h3>
        <h2 class="h3"><%= user.first_name %> <%= user.last_name %><small> <%= user.username %></small></h2>
        <%= link_to "details", user_path(@user), class: "pull-right" %>
        <h4><%= user.email %></h4>
    </li>
<% end %>

已经尝试使用＆lt;％link_to .... | do |在李周围。但是，这使得li中的所有数据都可以单独点击。怎么办呢？

Answer 1

假设您使用的是bootstrap，您应该查看可点击的linked list group item。这使用div和a标记而不是列表。以下是它的外观：

<div class="list-group">
<% @users.each do |user| %>
    <%= link_to user_path(user), class: "list-group-item" do %>
        <h3 class="pull-right"><small class="text-uppercase">created </small><%= user.created_at.to_time %></h3>
        <h2 class="h3"><%= user.first_name %> <%= user.last_name %><small> <%= user.username %></small></h2>
        <h4><%= user.email %></h4>
   <% end %>
<% end %>
</div>

Answer 2

尝试：

   <%= link_to "details", user_path(user), class: "pull-right" %>

Answer 3

我会遵循这种方法。首先，我将在我的链接中的某个地方使用我的路径，我可以通过javascript“轻松”使用它，就像这样

<li class="clickable-link" data-link-path="<%= user_path(@user) %>">
  ...
</li>

这可能是这样的

<li class="clickable-link" data-link-path="/users/47">
  ...
<li>

然后是一些javascript

$(document).ready(function(){
  $(".clickable-link").on('click', function(e){
    url = $(this).attr('data-link-path');
    window.location = url;
  });
});

然后是一些css

.clickable-link{
  cursor: pointer;
}

Answer 4

您可以使用window.location.href在下面的onclick事件中添加路径路径，

<ol class="list-group">
<% @users.each do |user| %>
    <li class="list-group-item clearfix" onclick="window.location.href='<%=user_path(@user)%>'">
        <h3 class="pull-right"><small class="text-uppercase">created </small><%= user.created_at.to_time %></h3>
        <h2 class="h3"><%= user.first_name %> <%= user.last_name %><small> <%= user.username %></small></h2>
        <%= link_to "details", user_path(@user), class: "pull-right" %>
        <h4><%= user.email %></h4>
    </li>

然后你可以将样式光标指针添加到'li'标签。

感谢。

Rails：使列表项可单击

4 个答案: