Ruby on Rails中的淡出新闻提示.示例代码出现故障

Fade Out News Ticker in Ruby on Rails. Trouble with example code

本文关键字：代码 故障 提示 新闻 Rails on 淡出 Ruby      更新时间：2023-09-26

我想制作一个淡出的新闻行情器。代码似乎还可以，但不起作用。目前，我已经在html.erb中放入了样式和脚本（这是一个ruby on rails部分）

<ol>
 <li class="divider">Company Pulse</li>
</ol>
  <ol id="scrollable" style="height:90px; overflow:hidden;">
    <% @tweets.each do |tweet| %>
       <li>
          <%= link_to "
            <div id='"twitter_presence'" style='"vertical-align: middle;'">
            <img src='"#{tweet.user.profile_image_url}'" style='"vertical-align:middle;'"/>
            <span style='"vertical-align: middle;'">#{tweet.user.name}</span>
           </div>
            <span id='"twitter_text'">
            <h3 style='"text-align: center'">'" #{tweet.text} '"</h3>
            <h3 style='"text-align:right'">#{tweet.created_at}</h3>
            </span>
          ".html_safe, 'employees/twitter' %>
      </li>
    <% end %>
  </ol>
<script type="text/javascript">
 var aniSpd01 = 1000;
 var fadeSpd01 = 1000;
 $(function()
 {
    var startIndex = 0;
    var endIndex = $('#scrollable li').length;
    $('#scrollable li:first').fadeIn(fadeSpd01);
    window.setInterval(function()
    {
        $('#scrollable li:eq(' + startIndex + ')').delay(fadeSpd01).fadeOut(fadeSpd01);
        startIndex++;
        $('#scrollable li:eq(' + startIndex + ')').fadeIn(fadeSpd01);
        if (endIndex == startIndex) startIndex = 0;
     }, aniSpd01);
 });
</script>

可能出了什么问题，如何解决？

抱歉，我推出了自己的js。你能试试这个吗？ 
var fadeOutSpeed = 1000,
    transitionSpeed = 1000,
    idx = 0;
function showNews() {
  $('#scrollable li').fadeOut(fadeOutSpeed, function() {
    $('#scrollable li:eql(' + idx + ')').fadeIn();
  });
  idx += 1;
  if (idx == $('#scrollable li').length) idx = 0;
  setTimeout('showNews()', transitionSpeed); 
}
function() { showNews() }

好的。这里有几件事不对劲。这个ticker脚本需要jQuery，重要的是应用程序中的所有java脚本都要按顺序加载到/app/assets/javascripts/application.js

首先要做的是将脚本放在的一个单独的文件中/app/assets/javascript我将文件命名为scroll.js

接下来，转到application.js并添加一行：

//= require scroll

它应该放在require列表的末尾，在jquery之后，一个jvnill建议。之后，请确保相应地命名视图中的类。如果该功能此时不起作用，请命名并添加一行：

name();

在scroll.js文件的末尾。（其中name是函数的名称）

相关文章：