如何将div_id传递给jquery加载函数

我有一个有很多帖子的故事模型。我在索引视图中列出了这些故事，没有每个故事的帖子。当用户单击索引视图中的某个故事时，我希望通过使用ajax.load函数调用stories/（story_id）/posts来加载该故事的帖子，并确保将帖子放入该故事的正确div（由“”创建）

问题是，我不知道如何将正确的故事id传递给.load函数，也不知道如何确保生成的文章被加载到正确的文章桶中

以下是my_story.html.erb文件：

<%= div_for(story) do %>
   <%= div_for(story, "heading_for") do %>
        <span class=story_title>
            <%= story.title.titleize %>
        </span>
        <span class=story_post_amount>
            # of posts: <%= story.posts.length %>
        </span>
   <% end %>
<%= div_for(story, "posts_bucket_for") do %>
<% end %>

---

任何帮助都将不胜感激

这里有一种实现解决方案的方法（适用于Rails 3）

根据的Rails文档，

div\u for（story，：class=>“story”）

将生成如下所示的HTML：

<div id="story_123" class="story"> Your content </div>  

对于您的存储桶，我不会为（故事）使用另一个

div\u。这将导致页面上有两个具有相同ID的
div
。相反，我会这样做：

<%= div_for(story, :class => "story") do %>
    <p>The story</p>
    <div class="posts" />
<% end %>

剩下的任务是让控制器操作处理AJAX请求并返回要插入页面的帖子

class StoriesController < ApplicationController
  def posts
    story = Story.find params[:id]
    # Render the story's posts inside a partial (without any layout)
    render :partial => "stories/posts", :locals => { :posts => story.posts }, :layout => false
  end
end

class StoriesController“stories/posts”，：locals=>{:posts=>story.posts}，：layout=>false
结束
结束

您还需要创建一个分部来渲染帖子。在我的示例中，这将是
views/stories/_posts.html.erb

如果您以前没有使用过AJAX+Rails，那么这是很多新的学习资料，因此这里有两个有用的教程：而且。
有很多方法可以实现您想要实现的目标，我敢打赌，这里的许多贡献者都会根据他们的编码经验为您提供解决方案。这是我的：

首先也是最重要的一点是，一旦你将真实的故事“上传”到你想要的地方，你必须决定是否需要保持故事标题可见

我不知道ruby或RubyonRails，但对“博客”有很好的了解

假设您从数据库中将可用的故事列为

<div id='story1' onClick='showStory(1); ' >Story 1</div>
<div id='story2' onClick='showStory(2); ' >Story 2</div>
<div id='story3' onClick='showStory(3); ' >Story 3</div>
<div id='story4' onClick='showStory(n); ' >Story n</div>

function showStory(storyNumber) {
    $.get('url-of-the-story-storyNumber', function (data) {
        $('#story'+storyNumber).html(data);
    });
}
or
function showStory(storyNumber) {
     $('#story'+storyNumber).load('url-of-the-story-storyNumber');
}

故事1
故事2
故事3
故事
函数showStory（故事编号）{
$.get（'url-of-the-story-storyNumber'，函数（数据）{
$（'#story'+storyNumber）.html（数据）；
});
}
或
函数showStory（故事编号）{
$（“#story”+storyNumber）.load（'url-of-the-story-storyNumber'）；
}

如果您计划不覆盖故事标题行，只需在故事行中添加另一个div：

<div onClick='showStory(1); ' >
 Story 1
 <div id='story1' ></div>
</div>

<div onClick='showStory(2); ' >
 Story 2
 <div id='story2' ></div>
</div>

<div onClick='showStory(3); ' >
 Story 3
 <div id='story3' ></div>
</div>

<div onClick='showStory(n); ' >
 Story n
 <div id='storyn' ></div>
</div>


故事1
故事2
故事3
故事

你越容易使你的身份证“易于管理”，就越容易让人使用它们

祝你好运
 您必须使storyID可以从单击的任何内容中使用（可能作为HTML中的属性）。然后，可以使用该storyID为.load（）构造所需的URL（使用字符串数学），然后在调用.load（）时将其作为URL参数传递。仅供参考，当您发布erb文件而不是实际生成的HTML时，您将能够帮助您的人限制为了解Rails的人，而不是了解HTML的人。发布erb文件的要点。作为一名新手，我最大的问题是如何提取rails创建的html元素id，以便在load（或get）函数中使用。我附加了erb文件，因为元素ID是由该文件中的rails创建的。马克斯的回答告诉了我怎么做，让我觉得自己很傻，因为我本该亲眼看看。谢谢你，泽奎尼亚。这让我在很大程度上找到了答案。不过我要检查一下maxs的答案，因为他向我展示了如何提取rails助手方法动态创建的元素ID。谢谢Max。我有一个评论和一个问题。首先是评论。请注意，我使用rails助手创建了我的帖子存储桶：。可选的“post\u bucket\u for”将创建ID为：posts\u bucket\u for\u story\u 1的div。因此，我不存在使用相同dom ID的多个元素的问题。现在回答问题。get（）函数似乎在不执行js的情况下加载我的posts/index.js.erb文件。如何确保js文件执行？或者，我如何只呈现posts/index.html.erb文件？谢谢谢谢你提醒我关于div_的事。你能解释一下你所说的“index.js.erb被加载但没有执行”是什么意思吗。结果证明我并不是真的想加载这个文件。我只是想使用js向我的帖子发出get请求#索引操作。这样就可以执行我的post/index.js.erb文件。我仍然需要单击的故事的故事id，以便将其传递给索引操作，您的回答告诉了我如何提取它。至于我所经历的。我正在将posts/index.js.html文件的文本加载到dom中，而我真正想做的是执行它。谢谢你的帮助。我在路上！
class StoriesController < ApplicationController
  def posts
    story = Story.find params[:id]
    # Render the story's posts inside a partial (without any layout)
    render :partial => "stories/posts", :locals => { :posts => story.posts }, :layout => false
  end
end

<div id='story1' onClick='showStory(1); ' >Story 1</div>
<div id='story2' onClick='showStory(2); ' >Story 2</div>
<div id='story3' onClick='showStory(3); ' >Story 3</div>
<div id='story4' onClick='showStory(n); ' >Story n</div>

function showStory(storyNumber) {
    $.get('url-of-the-story-storyNumber', function (data) {
        $('#story'+storyNumber).html(data);
    });
}
or
function showStory(storyNumber) {
     $('#story'+storyNumber).load('url-of-the-story-storyNumber');
}

<div onClick='showStory(1); ' >
 Story 1
 <div id='story1' ></div>
</div>

<div onClick='showStory(2); ' >
 Story 2
 <div id='story2' ></div>
</div>

<div onClick='showStory(3); ' >
 Story 3
 <div id='story3' ></div>
</div>

<div onClick='showStory(n); ' >
 Story n
 <div id='storyn' ></div>
</div>