Question

我有很多看起来像的按钮：

extern "C"

我想避免这么多的重复;有没有办法定义某种单一属性，它将扩展到其他几个属性？例如，它可能看起来像

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

NB。当然这可以通过服务器端脚本完成，但我希望避免这种情况。我正在使用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");

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

Answer 2

听起来您可能正在寻找一个客户端视图框架，例如Handlebars或React.js。您可以在客户端上发送（和缓存）模板，然后绑定到从服务器检索的JSON。

您可以使用完整的堆栈框架，例如Ember.js或Angular，但这可能超出您的需要。

HTML5将常用属性组合成超级属性？

2 个答案: