Question

请参考下图了解外观。

我在轨道上的ruby中有一个名为sauces的数据库。

酱料表中的字段如下：

ID
名称
描述
图片

这是我的css：

#container{width:950px;height:800px;}
#title{this_is:irrelevant;}
#sauce_picture{bla bla}
#sauce_name{bla bla}
#sauce_splatter{background-image:url("someimage.png")}

HTML

<html>
 <body>
  <div id="container>
   <div id="title><h1>SAUCES</h1></div>
   <div id="sauce_picture><img src="somepic.png/></div>
   <div id="sauce_name><h2>Sauce 1</h2></div>
   <div id="sauce_splatter>
     <p>Sauce Description Goes Here</p> 
   </div>
  </div>
 </body>
</html>

好的，rails数据库表有6条记录，每个字段都存在。我想要实现的是说页面已加载。我希望记录在第一个记录，其中<img src="somepic.png/>，<h2>Sauce 1</h2>，<p>Sauce Description Goes Here</p>的内容都是从数据库表中检索的，因为计数从一开始。

我不知道如何制作它，以便当按下右箭头时，id变为2，上述内容变为记录编号2（id = 2）中的内容。

最后我该如何做，以便，如果id = 1（即第一个记录，左箭头被禁用作为链接，并且当最后一个记录出现时，右箭头将被禁用。这可以通过使用JQuery更改元素来实现，但我如何一起使用Rails和Jquery。

这样，如果我将来在数据库表中添加一个新酱，我就不必更改任何代码了，毕竟那是MCV的全部内容。

由于

The image

Answer 1

一个可能的解决方案，只要你的Sauces-Table没有很多条目，就像移交一个数组一样

@sauces = Sauce.all

默认情况下，您的视图可以渲染数组的一个条目，并且为了更新div，您需要编写一些JavaScript来跟踪实际选定的条目，并使用新选择的酱的属性更新div。

对于较大的表，您可以使用AJAX从后端检索所选的酱汁，但您仍需要通过JavaScript更新异步调用结果中的内容div。

你也可以为每个酱汁条目渲染一个div并隐藏除了要显示的实际的一个div，按下一个按钮后，将显示一个带有所选酱汁的隐藏div，另一个将通过JavaScript设置为invisble

根据Ruby on Rails中的当前数据库记录更改元素内容

1 个答案: