如何将js行合二为一？

Question

您好，我在咖啡文件中有几个 js/mootools 代码，我想将它们组合在一起，如

        $$("#head").setStyle('border-right-color','#e64626');
        $$("#head").setStyle('background','#e64626');
        $$("#console").setStyle('border-right-color','#e64626');
        $$("#console").setStyle('background','#e64626');

是否可以将其合并为一行？

Answer 1

您可以使用 setStyles() 并向其传递一个对象。您还可以在传递给 $$ 到 select 多个元素的字符串中使用 ,。所以它会导致：

$$("#head, #console").setStyles({
    'border-right-color': '#e64626',
    'background': '#e64626'
});

jsFiddle: http://jsfiddle.net/sevvtsx0/

Answer 2

虽然@sergio给你的是正确的答案，也是你想要的，但这可能是错误的做法（虽然他的回答没有错，但问题不对）。

在 JavaScript 中为效果设置元素内联样式并不是一个很好的做法。它在 animation/fx 中有其用途，但似乎并非如此。原因是它由于高度特异性而打破了级联，使得之后的恢复、控制或改变变得更加困难。它还使您的应用程序的外观和重新样式化变得更加困难，因为明显缺乏关注点分离，代码中的样式是严格的。

你需要通过CSS

解决这个问题

场景 1：静态，非可变 - 由于使用 ID 而不是 classes 不是很好但是：

#head, #console {
    border-right-color: #e6426;
    background-color: #e6426;
}

场景 2：动态，需要区分某些事件的元素，例如 click、focus、mouseover - 尽管您可以使用 [=16 等伪元素来解决其中的大部分问题=] 或 :hover，然后将其抽象为 class:

css:

.highlight-red {
        border-right-color: #e6426;
        background-color: #e6426;
}

javascript:

var els = $$('#head,#console');

// on whatever event... 
els.addClass('highlight-red');
// ... later
els.removeClass('highlight-red');

你以后会感谢你自己或你的继任者或你的客户，无论如何。这还有一个额外的好处，那就是下次您需要更改样式或添加更多规则来区分时，您可以去一个地方。您甚至可以为常青浏览器添加过渡/动画效果。

如何将js行合二为一？

How to combine js lines into one?

mootools

coffeescript

jsFiddle: http://jsfiddle.net/sevvtsx0/