0

HTMLウィジェットを作成しようとしています:

HTML:

<div>
    <h1 class="title" data-bind="title">Title</h1>

    <div>
        <h1 id = "dc1" class="dc">DC1</h1>
    </div>
    <div>
        <h1 id = "dc2" class="dc">DC2</h1>
    </div>

    <p class="updated-at" data-bind="updatedAtMessage"></p>
</div>

そして、CoffeeScriptで要素id="dc1"と要素の背景色を動的に設定できるようにする必要があります。id="dc2"背景色を設定したクラスを追加して、これを行う予定です。

SCSS:

&.up {
    background-color: green;
}

&.down {
    background-color: red;
}

.dc {
    background-color: orange;
    font-size: 30px;
    float: left;
    width: 50%;
}

これまでのところ、ウィジェットの背景全体を設定できましたが、上記の子要素は設定できませんでした:

コーヒースクリプト:

$(@node).removeClass('up down')
$('#dc1').removeClass('up down')
$('#dc2').removeClass('up down')

$(@node).addClass('down')
$('#dc1').addClass('down')
$('#dc2').addClass('up')

最終的には、コーヒースクリプトでクラスを「上」または「下」にハードコーディングするのではなく、一部のデータに応じてクラスを追加することに注意してください。

しかし、何も起こりません..id="dc#"要素を正しく選択していますか?

それがコンテキストに役立つ場合、私はダッシュのためにこれをやっています

4

1 に答える 1

1

あなたの SCSS は意味をなさないので、SCSS から CSS への変換でエラーが発生していると思います。&SCSSの Anは、親セレクターへの参照です。

&CSS に表示される親セレクターに置き換えられます

そのため&.up、最上位にあると意味がなく、エラーが発生するはずです。のみに適用されるように SCSS を修正すると、次のように.upなります。.down.dc

.dc {
    /* ... */
    &.up {
        background-color: green;
    }
    &.down {
        background-color: red;
    }
}

その後、すべてがうまくいくようです。

デモ: http://jsfiddle.net/ambiguous/9y9uywm9/

Sassmeister (および他の同様のオンライン ツール) を使用して、SCSS が元の SCSS についてどう考えているかを確認できます。

于 2014-11-15T19:04:34.313 に答える