web-dev-qa-db-ja.com

コーヒースクリプトでそれぞれをループすることは可能ですか？

私はプログラムでいくつかのjavascriptボタンを作成して、ページの表示を切り替えようとしています（スナップタグフィルタリング用）。これは1つのタグで機能します。

trigger = ".sales-focus-btn"
target = ".sales-focus"

jQuery ->   
  $(trigger).toggle ->
    $("#primary-content").find('.container').hide()
    $("#primary-content").find(target).show()
  , ->
    $("#primary-content").find('.container').show()

Coffeescriptで同様のことを行うことは可能ですか？ただし、配列を使用します。

trigger = [
  ".sales-focus-btn"
  ".service-focus-btn"
  ".other-focus-btn"
  ...
]
target = [
  ...
]

タグのタイプごとにループしてトグルを作成することは可能ですか？

[〜＃〜] update [〜＃〜]

はい、それは可能です。次のフォームを使用します。

myFunction = (el) -> console.log el
myFunction elem for elem in array
jqueryloopscoffeescript
14
Tyler

もちろん、それは可能です：

_content = $('#primary-content')
container = content.find('.container')

tags = [
    '.sales-focus'
    '.service-focus'
    '.other-focus'
]

$.each tags, (tag) ->
    target = content.find(tag)
    $(tag + "-btn").toggle ->
        container.hide()
        target.show()
    , ->
        container.show()
_

DOM要素をキャッシュすることを忘れないでください。または、jQuery.each tags, (tag) -> ...の代わりに_for tag in tags_を使用します。

_for tag in tags
    do ->
      target = content.find(tag)
      $(tag + "-btn").toggle ->
        container.hide()
        target.show()
      , ->
        container.show()
_

（@epidemianが指摘したように、各targetをスコープ内に維持するには、_do ->_ IIFEが必要です）

24
Ricardo Tomasi

ループ内でtoggleを呼び出すことはできますが、奇妙なJSスコープルールに注意する必要があります。基本的に、次のようにループ内で関数を生成する場合：

for n in [1, 2, 3]
  $(".btn-#{n}").click -> alert "you clicked #{n}"

すべてのボタンを押すと「3をクリックしました」と表示されます 。これは、n変数のスコープがループの本体に限定されているのではなく、そのループを含むすべての関数に限定されているためです。したがって、ループが実行されると、nの値が変更され、最終的な値は3になります。ループ内で作成されたすべての関数は同じ変数nへの参照を持っているため、すべて3を出力します。ループが終了した後に実行されたとき。 CoffeeScriptでは、 do statement を使用してこの問題を回避できます。これにより、基本的に新しいブロックスコープ変数が導入されます。

for n in [1, 2, 3]
  do (n) ->
    $(".btn-#{n}").click -> alert "you clicked #{n}"

または補助機能を使用する：

setupClick = (n) -> 
  $(".btn-#{n}").click -> alert "you clicked #{n}"

setupClick n for n in [1, 2, 3]

それを念頭に置いて、次のようにループを実装できます（これは リカルドの答え の適応です）：

$content = $('#primary-content')
$container = $content.find('.container')

targetsByTrigger =
  '.sales-focus-btn': '.sales-focus'
  '.service-focus-btn': '.service-focus'
  '.other-focus-btn': '.other-focus'

setupTrigger = (trigger, target) ->
  $(trigger).toggle ->
    $container.hide()
    $content.find(target).show()
    console.log 'showing', target
  , ->
    $container.show()

setupTrigger trigger, target for trigger, target of targetsByTrigger

トリガーとターゲットの両方のクラス名をオブジェクトに配置して、トリガーのクラス名を<target class name>-btnから取得できることに注意してください。そうでない場合は、['.sales-focus', '.service-focus', '.other-docus']のような配列に固執してから、-btnを追加する方がおそらく良いでしょう。また、「jQuerized」値のプレフィックスとして$を使用する規則が好きですが、それは個人的な好みです:)

3
epidemian