Question

有点令人困惑，但这是我第一次做这样的事情。所以我有一个html页面，我循环遍历数据库以显示数据，但也有一个javascript脚本检查一些值并相应地更改背景但问题是它只发生在第一个元素。

这是我的部分代码：

<% #prints the artists that match the search, prints all for empty search %>
      <% @top100.each_slice(1) do |top100| %>
            <div class="row">
              <% top100.each do |top100| %>
                    <div id = "arrow">
                      <p>test</p>
                    </div>
                    <script>
                        var current = <%= top100.top100Current %>
                        var lastWeek = <%= top100.top100LastWeek %>
                        if(current < lastWeek) {
                          document.getElementById("arrow").style.backgroundImage = "url('http://www.clker.com/cliparts/i/5/z/3/G/y/red-arrow-down-th.png')";
                        }
                        else {
                          document.getElementById("arrow").style.backgroundImage = "url('http://www.clker.com/cliparts/d/3/c/4/12065699181684813498pitr_green_single_arrows_set_3.svg.thumb.png')";
                        }
                    </script>
              <% end %>
            </div>
      <% end %>

Answer 1

document.getElementById（＆＃34; arrow＆＃34;）只返回一个元素。您的页面有多个元素，ID为＆＃34;箭头＆＃34;。 Javascript将在客户端运行，因此您多次渲染脚本标记并不重要。

要解决此问题，请使用class＆＃34; arrow＆＃34;并使用Document.getElementsByClassName（）。 SEE用于使用。

渲染结束时只有一个脚本标记就足够了。

Answer 2

有几件事可能会让你绊倒。

首先：您正在选择一个ID。 ID是独一无二的。您的脚本使用箭头查找第一个ID，并应用该脚本。创建一个唯一的ID（如果是循环，则基于索引）或使用类

第二：你的脚本中没有任何内容实际上是通过dom元素循环的。如果您不反对jquery，我会反而定位100的父级，并循环遍历子级，每次都执行一个脚本。

第三：看起来你实际上是在循环中创建一个脚本。你不需要为每个孩子创建一个脚本，创建一个在最后通过dom循环的脚本会更好，更节省内存。

我会渲染所有内容，然后使用这样的脚本：

$('#parent').children('div').each(function () {
     // "this" is the current element in the loop
     // Assign style here
});

作为替代方案，你可以在rails循环中添加一个类名，然后只使用css吗？

Rails - 在每个数据库条目中运行javascript

2 个答案: