Html 在coffeescript中按ID获取元素

我正在尝试创建一个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>

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

到目前为止，我已经成功地设置了整个小部件背景，但没有设置上面提到的子元素： 我一直在使用：

咖啡脚本：

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

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

注意：最后，我将根据一些数据添加这些类，而不是在coffeescript中将它们硬编码为“up”或“down”

但是什么也没有发生。。我是否正确选择了

id=“dc#”

元素

---

如果它有助于上下文，我这样做是为了

你的SCS没有意义，所以我猜你的SCS到CSS转换中遗漏了一个错误。SCSS中的

和
是：

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

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

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

然后一切似乎都很好

演示：

您可以使用（和其他类似的在线工具）查看SCS对原始SCS的看法。
不在coffescript
$（'#dc1'）。addClass（'down'）
->
$（“#dc1”）。addClass“down”
？我看不出您的coffescript有任何问题，问题一定在某个地方else@Vucko在CoffeeScript中，括号通常是可选的，但很多人（包括我）都将它们放进去，以使代码更清晰。单引号对CoffeeScript中的字符串也有效，双引号也有效，但它们支持字符串插值，所以很多人（包括我）坚持使用单引号，除非他们特别想使用插值。谢谢，我从来没有注意到，你知道我可以使用什么好的scss验证器来指出这一点吗？我想任何scss到CSS的转换器都会抱怨错误。上列出了一些工具