将 RoR 值传递到视图中的 javascript (JQuery)

Question

我对下面的代码感到困惑。有人可以告诉我我做错了什么，javascript 无法访问值 p 吗？谢谢 ！

<% p=progress_for(contest_score) %> # p is non-zero

<script type="text/javascript">
  $(function(){
      $('#contest_progressbar').progressbar({value: <%=p%>}); 
      <!--value p becomes 0 when rendered by jquery-->

      $("#contest_progressbar").css({ 'background': 'LightYellow' });
      $("#contest_progressbar > div").css({ 'background': 'Orange' });
      $('#contest_progressbar span.text').text(<%=p%>+'%')
      <!--value p becomes 0 when rendered by jquery-->

   });
</script>
progress: <%=p%> progress bar should be below: # p is the correct value here

<div id='contest_progressbar' style="margin-left:20px; height: 20px;">
  <span class="text"></span>
</div>

编辑：使用直接脚本标签代替。但同样的问题 EDIT2：现在似乎是一个 JQuery 问题。请参阅 Bryan 答案评论中的 html

Answer 1

有可能 jQuery 没有加载吗？如果您检查调试器，它可能会给您一个提示，例如 $ is not Defined。如果存在 Prototype/jQuery 冲突（如果您在 v3.1 之前使用 Rails，则很有可能），可能会默默地失败。

也可能出现这样的情况：JS 代码块需要在加载 jQuery 之后出现。我认为这是问题的原因是，鉴于您提供的信息，类似于 $('#contest_progressbar span.text').text(5+'%');如果您已正确加载 jQuery 并且没有其他 ID 为 contest_progressbar 的元素，则应该始终可以工作。

示例： http://jsfiddle.net/6JQNe/1/

另外，还有一些小要点

• ：需要 <%= javascript_tag do %> （注意等号）以确保它呈现。
• "#contest_progressbar > div" 不会匹配任何内容

Answer 2

问题已解决。它与 JQuery 没有太大关系。进度条的 div id 被破坏，因为代码位于部分代码中，由循环中的视图方法调用。每次调用都会覆盖同一个 div。下面的代码产生了我想要的结果。

<% pbar_id="pbar_#{contest_score.user_id}" %>

<script type="text/javascript">
  $(function(){
      $('#'+"<%=pbar_id%>").progressbar({'value':<%=p%>})
      $('#'+"<%=pbar_id%>").css({ 'background':'LightYellow' });
      $('#'+"<%=pbar_id%>"+' > div').css({ 'background':'Orange' });
   });
 </script>
progress: <%=p%>%
<div id=<%=pbar_id%> style="margin-left:20px; width:256px; height:20px;">
</div>