javascript - HTML5 将常用属性组合成超属性？

Question

我有很多看起来像这样的按钮:

<button type="button" class="btn btn-info" data-toggle="modal" data-target="#qq" data-req="foo">Foo</button>
<button type="button" class="btn btn-info" data-toggle="modal" data-target="#qq" data-req="bar">Bar</button>
<button type="button" class="btn btn-info" data-toggle="modal" data-target="#qq" data-req="baz">Baz</button>

我想避免太多重复；有什么方法可以定义某种可以扩展到其他几个属性的单一属性吗？例如，它最终可能看起来像

super x = 'type="button" class="btn btn-info" data-toggle="modal" data-target="#qq"';

<button super="x" data-req="foo">Foo</button>
<button super="x" data-req="bar">Bar</button>
<button super="x" data-req="baz">Baz</button>

注意。当然，这可以通过服务器端脚本来完成，但我希望避免这种情况。我使用的是 Bootstrap 3.3.4，这些按钮会触发 Bootstrap 模式。

Answer 1

这个有效:

<button type="button" class="x" data-req="foo">Foo</button>
<button type="button" class="x" data-req="bar">Baz</button>
<button type="button" class="x" data-req="baz">Baz</button>

在 Javascript 部分

$("button.x").addClass("btn btn-info");
$("button.x").attr("data-toggle", "modal");
$("button.x").attr("data-target", "#qq");

这消除了大部分重复，但我仍然想知道是否有更优雅和/或运行时效率更高的方法。