Question

我有一个像：

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

注意它生成dinamic CSS id，每个块clicle一个，resoulting html是一个不同的dd列表 - ＆gt; span - ＆gt;身份证号码：

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

我希望“dinamically”将“自定义CSS片段”关联到不同的CSS ID（＃13774＃774），例如：

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

如何在没有link_to帮助者的情况下调用ajax（在Rails 3.2.3中：remote =＆gt; 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。

Answer 1

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

更改块以为每个范围添加唯一的类。这为您以后的风格带来了好处。

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

然后你应该可以在页面底部使用一些jQuery来选择每一个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，但除非我遗漏了某些东西，否则这应该接近解决你所记录的问题。

如何在没有“link_to”帮助者的情况下调用ajax？

1 个答案: