jquery - 从使用 ajax 更新页面的 js.erb 文件维护 CSS 样式

Question

我有一个通过 ajax 更新的赞成/反对投票机制。最初，我认为显示票数的代码是:<p id='votes'><%= pluralize video.vote_sum, 'Vote' %></p>我的 create.js.erb 文件中的代码是:$('selector').html("<p id='votes'><%= escape_javascript pluralize(@video.vote_sum, 'Vote') %></p>");

但是，我意识到我想为从 <%= pluralize video.vote_sum, 'Vote' %> 生成的数字设置不同的 CSS 样式。而不是文本“投票”或“投票”。这需要我将 View 代码更改为:

<p id='votes'>
    <%= video.vote_sum %>
    <div class="vote_text">
    <% word = "Vote" %>
    <% if video.vote_sum != 1 %>
      <%= word.pluralize %>
    <% else %>
      <%= word %>
    <% end %>
    </div>
</p>

效果很好。但是，当我将 JS 代码更改为:

$('selector').html("<p id='votes'>
  <%= video.vote_sum %>
    <div class="vote_text">
    <% word = "Vote" %>
    <% if video.vote_sum != 1 %>
      <%= word.pluralize %>
    <% else %>
      <%= word %>
    <% end %>
    </div>
</p>");

投票显示停止更新。现在投票有效，因为当我刷新页面时，它会以正确的样式显示正确的票数。但是，ajax 已停止工作。我该如何解决这个问题？

Answer 1

您在该 JavaScript 字符串中有未转义的引号。此外，JavaScript 中的多行字符串需要一些特殊标记——在每个非终止行末尾的 \。

固定:

$('selector').html("<p id='votes'> \
  <%= video.vote_sum %> \
    <div class=\"vote_text\"> \
    <% word = "Vote" %> \
    <% if video.vote_sum != 1 %> \
      <%= word.pluralize %> \
    <% else %> \
      <%= word %> \
    <% end %> \
    </div> \
</p>");