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，则极有可能），它可能会无声地失败。

在加载jQuery之后，JS代码块可能需要出现。我认为这个问题的原因在于，鉴于您提供的信息，如果您正确加载了jQuery并且没有其他元素，那么$('#contest_progressbar span.text').text(5+'%');之类的内容应始终。 ID contest_progressbar。

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

另外，还有一些小问题：

您需要<%= javascript_tag do %>（请注意等号）以确保其呈现。

"#contest_progressbar > div"将无法匹配任何内容

Answer 2

问题已解决。它与JQuery没什么关系。进度条的div id被破坏了，因为代码是部分的，由循环中的view方法调用。每次通话都会覆盖同一个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>

在视图中将RoR值传递给javascript（JQuery）

2 个答案: