Question

我正在尝试创建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%;
}

到目前为止，我已设法设置整个窗口小部件背景，但不设置上面提到的子元素：我一直在使用：

CoffeeScript的：

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

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

请注意，最终我会根据某些数据添加这些类，而不是将它们硬编码为“＃”;或者＆＃39; down＆＃39;在coffeescript。

但没有任何事情发生..我是否正确选择id="dc#"元素？

如果它对上下文有帮助，我会为Dashing

执行此操作

Answer 1

您的SCSS没有意义，所以我猜您错过了SCSS到CSS转换的错误。 SCSS中的&是reference to the parent selector：

&将替换为CSS
中显示的父选择器

所以在顶级&.up没有任何意义，应该生成错误。如果我们修复了SCSS，以便.up和.down仅适用于.dc：

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

然后一切似乎都运转正常。

演示：http://jsfiddle.net/ambiguous/9y9uywm9/

您可以使用Sassmeister（以及其他类似的在线工具）来查看SCSS对您原始SCSS的看法。

在coffeescript中按ID获取元素

1 个答案: