どのようにCoffeeScriptの中モジュラスを使用して交互に行関数を書くのでしょうか?

StackOverflow https://stackoverflow.com/questions/4217825

  •  26-09-2019
  •  | 
  •  

質問

私には、JavaScriptの典型的なチャンクのここでの例(表に交互に奇数または偶数行に背景のスタイルクラスを適用するコードを)持っています。私はそれを学ぶために、私の試みでのCoffeeScriptでこれを書き換えるしようとしています。 CoffeeScriptの範囲の構文が異なると、よりRubyの風です。私は本当にあなたがこれを行うだろう方法の例をいただければと思います?

   function alternate(id){ 
     if(document.getElementsByTagName){  
       var table = document.getElementById(id);   
       var rows = table.getElementsByTagName("tr");   
       for(i = 0; i < rows.length; i++){           
     //manipulate rows 
         if(i % 2 == 0){ 
           rows[i].className = "even"; 
         }else{ 
           rows[i].className = "odd"; 
         }       
       } 
     } 
    }

更新

は、私はjQueryのを使用して、これをしようとしたが、それは動作しませんよ(それはすべての行が#efefefなります)

$(document).ready ->
    rowCount = $('tbody tr')
    for row in rowCount        
        if row.length % 2 == 0
            $('tbody tr').css('background-color', '#363636')
        else
            $('tbody tr').css('background-color', '#efefef')
役に立ちましたか?

解決

Aもう少し簡潔ます:

for row, i in $('tbody tr')
  color = if i % 2 is 0 then '#363636' else '#efefef'
  $(row).css 'background-color', color

他のヒント

あなたもjqueryの

により提供される偶数/奇数メタセレクタに興味がある可能性があり
$('tbody tr:even').css 'background-color', '#363636'
$('tbody tr:odd').css 'background-color', '#efefef'

あなたの最終目標は、奇数/偶数行に別のスタイルを適用するだけであれば、あなたはこれを試すことができます:

// CSS file

#myTable tr:nth-child(even) { background-color: #363636; }
#myTable tr:nth-child(odd)  { background-color: #efefef; }

ここではありませんJS、スタイリングは、プレゼンテーションの関心事であるので、良いです単なるCSS、ます。

しかしそれだけで(比較的)最近のブラウザで動作します:IE 9+、Firefoxの4+、クローム...

for row, i in rowsは、ループカウンタを保持しているiを、試してみてください。

ライセンス: CC-BY-SA帰属
所属していません StackOverflow
scroll top