html - 在 coffeescript 中通过 ID 获取元素

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')

请注意，最终我将根据一些数据添加类，而不是在 coffeescript 中将它们硬编码为“向上”或“向下”。

但什么都没发生。我是否正确选择了 id="dc#" 元素？

如果它对上下文有帮助，我正在为 Dashing 做这件事

Answer 1

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

& will be replaced with the parent selector as it appears in the CSS

因此在顶层设置 &.up 是没有意义的，应该会产生错误。如果我们修复 SCSS，使 .up 和 .down 仅适用于 .dc:

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

然后一切似乎都正常工作。

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

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