0

我有一个像这样的块：

      - competitors.each do |competitor|
        %dl
          %dt
            ...
          %dd
            %span{:id => "#{competitor['watchers']}"}= "#{((competitor['watchers']*100.0)/30000).round.to_f}%"

请注意，它会生成动态 CSS id，每个块 cicle 一个，结果 html 是不同 dd --> span --> id number 的列表：

<dl>
  <dt>
    ...
    <dd>
      <span id="774">93.0%</span>
    </dd>
  </dt>
</dl>
<dl>
  <dt>
    ... 
    <dd>
      <span id="13774">46.0%</span>
    </dd>
  </dt>
</dl>

我想“动态地”将“自定义 CSS 片段”关联到不同的 CSS id（#13774 #774），例如：

:javascript
  $("##{competitor['watchers']}").css({ width: "#{((competitor['watchers']*100)/30000)}px" });

如何在没有 link_to 类型的助手的情况下调用 ajax（在 Rails 3.2.3 ':remote => true' 中）？

直到现在我尝试从内部块调用 JS，如：

      - competitors.each do |competitor|
        :javascript
          $("##{competitor['watchers']}").css({ width: "#{((competitor['watchers']*100)/30000)}px" });
        %dl
          %dt
            ...
          %dd
            %span{:id => "#{competitor['watchers']}"}= "#{((competitor['watchers']*100.0)/30000).round.to_f}%"

但它不起作用，代码永远不会注入到 DOM 中。

4

1 回答 1

1

看起来您正在尝试显示某种条形图，在这种情况下，我会建议以下内容（我假设您使用的是 jQuery，因为这就是标记的内容）：

更改您的块以向每个跨度添加一个唯一的类。这会在以后为您带来风格上的好处。

%dd
        %span{:id => "#{competitor['watchers']}", :class => "progress-bar"}= "#{((competitor['watchers']*100.0)/30000).round.to_f}%"

然后你应该能够在页面底部使用一些 jQuery 来选择每一个，并对其进行一些基本的数学运算：

$('span.progress-bar').each(function(index,element){
    var num = $(element).attr('id'); // get element id
    var width = parseInt(num * 100 / 30000); // do your math, then get the integer value for width
    $(element).css('width',width+'px'); // set width
}

我知道您正在寻找 ajax，但除非我遗漏了什么，否则这应该接近于解决您记录的问题。

于 2012-05-01T11:28:29.630 回答