Question

我在一个表中有一个索引页面，其中包含不同的软件。我想在单击tr时显示其他信息（以模式显示）。

一切正常，但是我有一个软件的信息出现在我的模式中，并且每个tr都相同。

我想以相应的模式显示每个软件的信息。

我的脚本：

$(".clickable").click(function(e) {
    if (!$(e.target).hasClass('no-click')) {
        $('#exampleModal').modal('show');
    }
});

我的观点：

<% @nonpremium.each do |software| %>
  <table>
    <tr class="clickable">
        <td class="hey1">
          <%= link_to software_path(software), class: "no-click" do %>
            <%= image_tag software.logo.url(:medium), class:"no-click"%>
          <% end %>
        </td>

        <td class="hey3">
          <h6><%= software.slogan %></h6>
          <p><%= software.largeslogan %></p>
        </td>
    </tr>
</table>



<div class="modal fade bd-example-modal-lg" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <%= link_to software.software_name, software_path(software), class:"no-click" %>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
<% end %>

我在脚本中尝试了类似的方法，但是它不起作用..

    $(".clickable").click(function(e) {
    if (!$(e.target).hasClass('no-click')) {
        $('#exampleModal-<%= @software.id %>').modal('show');
    }
});

为您提供帮助

编辑：

控制器/页面

class PagesController < ApplicationController
    before_action :click, only: :index

    def home
        @softwares = Software.all.order(:cached_votes_up => :desc )
        @premium = Software.includes(:user).where(users: { subscribed: true }).order("RANDOM()").limit(2)
        @nonpremium = @softwares - @premium
    end

    def search
            @softwares = Software.ransack(name_cont: params[:q]).result(distinct: true)
            @categories = Category.ransack(name_cont: params[:q]).result(distinct: true)

            respond_to do |format|
                format.html {}
                format.json {
                @softwares    = @softwares.limit(5)
                @categories = @categories.limit(5)
                }
            end
    end
end

编辑2：

通过将要恢复的信息放入表中，可以达到预期的效果，然后输入“ display：none”。

<style>
        td.test {
    display:none;
    }
</style>

<td class="test">
      <span><%= software.software_description %></span>
      <span><%= get_video_iframe(software.youtube_id) %></span>
</td>

然后我从脚本中的表中获取信息：

$(".clickable").click(function(e) {
    if (!$(e.target).hasClass('no-click')) {
     var description = this.childNodes[3].innerHTML;
     var name = this.childNodes[5].innerHTML;
     document.getElementById("myModalName").innerHTML = name;
     document.getElementById("myModalDesc").innerHTML = description;
     $('#exampleModal').modal('show');
    }
});

然后在我的模态中显示：

...
  <div class="modal-body" id="myModalName">
   Name
  </div>
  <div class="modal-body" id="myModalDesc">
    Description
  </div>
...

可能还有更好的方法，但是成为初学者是我达到预期效果的方法。

但是我想以模态发布视频。

我不会通过隐藏显示的youtube视频来使我的主页超载吗？

Answer 1

您将无法在脚本中使用erb（除非它在视图中的script标记中，在这种情况下您的代码应该可以使用）-更好地使用data属性。例如，如果您将tr更新为以下内容：

<%= content_tag :tr, class: "clickable", data: { software_id: @software.id } do %>
  # the rest of your code within the tr
<% end %>
# Equivalent of using:
# <tr class="clickable" data-software_id="<%= @software.id %>">

这会将相关的software_id附加到DOM中的tr。然后，您可以在脚本中使用以下内容，访问此新属性：

$(".clickable").click(function(e) {
  if (!$(e.target).hasClass('no-click')) {
    $('#exampleModal-' + $(e.target).data('software_id')).modal('show');
  }
});

一切都会按预期进行。

如果您有任何疑问，请告诉我。希望这会有所帮助！

根据您的评论进行编辑：

您会看到该错误，因为@software是nil，因此您正尝试在id上调用nil。

这是一个常见错误，意味着需要确保在控制器中正确设置了@software。如果您发布控制器代码，我可能会帮助您。

或者，您可以将@software&.id与较新版本的Ruby / Rails（或较旧版本为@software.try(:id)）结合使用，来“安全”地尝试该方法。但是，这可能无济于事，更多的是补充说明：）

编辑2：

因此，在您的控制器中，实际上并没有分配单数@software，而是分配了复数@softwares：

   @softwares = Software.all.order(:cached_votes_up => :desc )
   @premium = Software.includes(:user).where(users: { subscribed: true }).order("RANDOM()").limit(2)
   @nonpremium = @softwares - @premium

然后，在您看来，您正在使用局部变量@nonpremium遍历software。因此，您可以：

分配@software是否应始终使用模态中的相同数据
返回上一个选项，将数据属性分配给tr，这是我建议的。尽管您需要更改代码以使用software而不使用@来解决正确的变量，但是使用该代码应该有效。

IE。

<%= content_tag :tr, class: "clickable", data: { software_id: software.id } do %>
  # the rest of your code within the tr
<% end %>

这可确保脚本根据单击的元素来解决单击问题，并直接从此处拉出id，这在您的software循环范围之内。

那是为了你吗？

TR的模态-不同的ID索引页

1 个答案: