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

虽然@sergio给你的是正确答案和你想要的，但这可能是错误的做法（尽管他的答案没有错，但问题还是关闭）。

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

您需要通过CSS解决此问题

方案1：静态，非可变 - 由于使用ID而不是类而不是很好，但是：

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

方案2：动态，需要区分某些事件的元素，例如click，focus，mouseover - 尽管您可以使用:focus之类的伪句来解决其中的大多数问题或:hover，然后将其抽象为一个类：

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

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

Answer 2

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

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

如何将js线组合成一个？

2 个答案:

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