在同一个div中渲染不同的部分

Question

我有几个这样的按钮：

<div class="button" id="picture-button">
<div class="button" id="text-button">
<div class="button" id="video-button">

然后我有一些JS：

$('.button').click(function () {
    $('.modal').toggle('slide', {
        direction: 'top'
    }, 300);
});

以及按钮打开的模式：

<div class="modal">
  <%= render 'picture_form' %>
</div>

问题是渲染的部分必须对应于点击的按钮，例如。图片按钮呈现图片形式。有没有比为每个部分单独的模态和js更容易的方法呢？

Answer 1

不幸的是，在用户获取页面之前，渲染是在服务器端完成的，因此无法使用您的用例。您应该做的是使用AJAX调用来查询服务器，以便在用户单击相应按钮时将数据放入模态中，或者只是将其全部呈现为不同的模态，并且仅显示用户单击的模式

例如，有三个ID为#button1, #button2, #button3的div模式，按钮点击显示与该按钮对应的任何一个。