15

プログラムでいくつかの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 = [
  ...
]

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

アップデート

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

myFunction = (el) -> console.log el
myFunction elem for elem in array
4

2 に答える 2

26

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

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

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

（ @epidemianが指摘したように、IIFEはそれぞれの範囲do ->を維持するために必要です）target

于 2012-07-07T01:21:40.257 に答える
3

ループで呼び出すこともできます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」値のプレフィックスとして使用する規則が好きですが、それは個人的な好みです:)

于 2012-07-07T02:37:38.107 に答える